DEV Community

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

Posted on

1 1

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

Sentry mobile image

Mobile Vitals: A first step to Faster Apps

Slow startup times, UI hangs, and frozen frames frustrate users—but they’re also fixable. Mobile Vitals help you measure and understand these performance issues so you can optimize your app’s speed and responsiveness. Learn how to use them to reduce friction and improve user experience.

Read the guide

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs