React Native Fundamentals
React Native is a framework for building Android and iOS app interfaces with React and JavaScript. Its components render through native platform UI, while you keep shared application code where the platforms allow it.
itMobile and client application development | OpenSkills.info
Course pathWalk it in order
Look it upDip in anytime
Go furtherLeaves this page
Intro
React Native Fundamentals
React Native lets you describe a mobile interface with React components and JavaScript. It renders those components through native platform UI. View, Text, and Image are React Native components that map to native building blocks.
That model makes React Native useful when a product needs Android and iOS applications with a shared React-based interface and codebase. It does not mean both platforms become identical. A platform can need a different control, API, interaction, or implementation.
The mental model
Continue the course
This section is part of the paid course.
See pricing to subscribe, or log in if you already have access.
Where this skill leads
Relevant careers
See how this topic contributes to broader role-level skill maps.
Sources
- https://reactnative.dev/
Supports
- React Native uses React and JavaScript to create Android and iOS app interfaces rendered through native platform UI
- Core components such as View, Text, and Image map to native platform UI building blocks
- React Native does not prescribe routing or access to every platform API, and the project recommends a framework such as Expo for a new app
- React Native has ecosystem projects for web and Windows targets
- https://reactnative.dev/docs/getting-started
Supports
- JavaScript fundamentals are a prerequisite for working with React Native
- The official documentation organizes learning from basic concepts through environment setup, workflow, UI, testing, performance, and native development
- https://reactnative.dev/docs/intro-react
Supports
- React Native relies on React concepts including components, JSX, props, and state
- Components return React elements, props configure rendering, and state stores data expected to change over time or after interaction
- useState adds state to function components
- https://reactnative.dev/docs/components-and-apis
Supports
- View, Text, Image, TextInput, Pressable, ScrollView, FlatList, and SectionList are built-in React Native components
- FlatList and SectionList render currently visible list elements and are appropriate for long lists
- https://reactnative.dev/docs/flexbox
Supports
- React Native uses Flexbox for child layout
- flexDirection defaults to column, alignContent defaults to flex-start, and flexShrink defaults to zero
- justifyContent aligns on the main axis and alignItems aligns on the cross axis
- flex divides available main-axis space and position absolute leaves normal layout flow
- https://reactnative.dev/docs/platform-specific-code
Supports
- The Platform module supports small platform-specific parts of a component
- React Native selects .ios. and .android. files when imported without a platform suffix
- .native. files support a shared native module when web code differs
- https://reactnative.dev/docs/environment-setup
Supports
- The official documentation includes environment setup and integration paths
- https://docs.expo.dev/get-started/overview/
Supports
- Expo documentation is the first-party reference for Expo's getting-started workflow
- https://github.com/jondot/awesome-react-native
Supports
- The curated Awesome React Native list includes React Native for Web, React Native for Windows, and Storybook among ecosystem resources
- https://necolas.github.io/react-native-web/
Supports
- React Native for Web provides React Native components and APIs for browser targets
- https://microsoft.github.io/react-native-windows/
Supports
- React Native for Windows is an ecosystem platform project for Windows targets
- https://storybook.js.org/docs/get-started/frameworks/react-native
Supports
- Storybook documents a React Native framework for component-focused UI development