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