18
Complete React Native one View
React Native is a great javaScript library in which we can make android, ios mobile app with a single code base. Here i will explain all the basic concept for learning react native. This will be a brief introduction of all the topics of react native.
first we will see how we can install the react-native in your system. We will work react-native-cli in the whole article.
npm install -g expo-cli
expo init firstProject
expo start
Here we will describe some of the basics components of react native like View, Text, Image, TextInput, ScrollView, StyleSheet
View
View in react native is div like tag. View is the fundamental component for building UI. View is the container that supports layout with flexbox, style, touch handling and accessibility.
import React from "react";
import { View, Text } from "react-native";
const ViewShow = () => {
return (
<View>
<View>
<Text>Box One</Text>
</View>
<View ><Text>Hello World!</Text></View>
</View>
);
};
export default ViewShow;
Text
Text support nesting, styling, and touch handling. text show the written content on the app.
return (
<View>
<Text>welcome to stupid Progrmmer </Text>
<Text>Thanks for reading </Text>
</View>
);
Image
In react native we can show image with the help of uri & require
uri -> for url
require -> for system image
return(
<View>
<Image source = {{uri:'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400t.png'}}
style = {{ width: 200, height: 200 }}
/>
<Image source = {require('C:/Users/MyDir/Desktop/NativeImage/logo.png')} />
</View>
);
TextInput
React Native provide well defined method to take text as an input through touchable keypad.
import React from "react";
import { SafeAreaView, StyleSheet, TextInput } from "react-native";
const TextInputExample = () => {
const [text, onChangeText] = React.useState("Useless Text");
return (
<SafeAreaView>
<TextInput
style={styles.input}
onChangeText={onChangeText}
value={text}
placeholder="write some text"
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
input: {
height: 40,
margin: 12,
borderWidth: 1,
},
});
export default TextInputExample;
React Natve also provide some basic keypad type functionality like numeric keypad, email-address, default and many more
18