In this tutorial we will see ‘How to create view in react native’.
The View is the basic component of React Native for building a background of user interface, View is container, supports layout with flex , touch handling and accessibility controls.
React native View map with UIView , <div> and android.view in native platform.
View is intended to be nested inside other views and can have 0 to many children of any type.
React Native View Example
In this Example, we create a view that contain two coloured boxed with blue and red color.
App.js
import React from ‘react’;
import {
StyleSheet,
SafeAreaView,
View,
Text
} from ‘react-native’;
import SignInScreen from ‘./src/screens/SignInScreen/SignInScreen’;
import AppNavigator from ‘./src/navigation/AppNavigator’;
import configureStore from ‘./src/store/store’;
import { Provider } from ‘react-redux’;
const store = configureStore();
const App = () => {
return (
<View
style={styles.root}
>
<Viewstyle={{ backgroundColor:”blue”, flex:0.3 }}/>
<Viewstyle={{ backgroundColor:”red”, flex:0.5 }}/>
<Text>Hello World!</Text>
</View>
);
};
const styles = StyleSheet.create({
root: {
flex:1,
backgroundColor:’white’
},
});
export default App;
Output:
