Complete React Native one View

#reactnative #completereactnative #javascript #mobileappdevelopment

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.

Install of React-native-cli

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

Create React Native App

expo init firstProject

Run React Native App

expo start

Basic Components of react Native

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