DEV Community

Cover image for Complete React Native one View
Vishesh Kumar
Vishesh Kumar

Posted on

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.

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
Enter fullscreen mode Exit fullscreen mode

Create React Native App

expo init firstProject
Enter fullscreen mode Exit fullscreen mode

Run React Native App

expo start
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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>
  );
Enter fullscreen mode Exit fullscreen mode

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>
);
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

React Natve also provide some basic keypad type functionality like numeric keypad, email-address, default and many more

Discussion (0)