Home

Awesome

Learning React Native

Just one of the things I'm learning. https://github.com/hchiam/learning

Generate native Android and native iOS components using one code base (although you can make platform-specific code with platform detection or file extensions).

Core/Custom/Community components ∈ React Native components ∈ React components.

Core components: <View>/<ScrollView>, <Text>/<TextInput>, <Image>, <FlatList>/<SectionList> and more core components and APIs like <ActivityIndicator>, <KeyboardAvoidingView>, <Modal>, <Pressable>.

There's also more docs on various APIs like detecting reduced motion or screen reader state with AccessibilityInfo (from react-native).

https://facebook.github.io/react-native/docs/getting-started

Setup from scratch

https://reactnative.dev/docs/environment-setup

Setup from this repo

npm install -g expo-cli
cd learning-react-native
npm install
npm start
# hit the "w" key to run in browser
# http://192.168.0.165:19006/
# open developer tools and choose a mobile device
# when you make changes, the preview will automatically reload

or:

yarn global add expo-cli
cd learning-react-native
yarn
yarn dev

Troubleshooting

If you see the localhost page automatically open in your browser, but your mobile device fails upon connecting with the default settings (via the QR code scan within the Expo Go app), try setting the connection to "Tunnel".

If you see a console error about something like the SDK version being incompatible, or react native version mismatch in Expo Go on your mobile device,try hitting the dismiss button and see if the demo still works for now. You might need to run expo update to automatically update all dependencies to be compatible in the app.json and package.json for you.

If you still can't get it to work on a real mobile device, you can still simulate mobile in a browser by hitting the "w" key in the terminal to run in browser.

Differences between React Native and Flutter

https://flutter.dev/docs/get-started/flutter-for/react-native-devs

Random notes