Introduction of React-native components

Introduction of React-native components like view, textinput, state, props.

To work with React-native you have to learn the Introduction of React-native components lets list out some of the components

  • View
  • TextView
  • TextInput
  • State
  • Props
  • FlatList
  • StyleSheet
  • Image
  • Button
  • ScrollView
  • Picker
  • Switch
  • ActivityIndicator

1.View

This is the most important UI components of React-native UI building, View acts like a container that supports layout with style, flexbox, synthetic touch events, etc, it is good to add all components inside View, You can add nested child view inside the parent View


2. TextView

TextView Component is used to display text like below, it also supports nested textView, styling, touch event

To display text from state you have used curly braces like below:

You can add style to TextView like below:

or

You can add onPressEvent to TextView like below:


3. TextInput

TextInput use to inputting data from the user via keyboard, props provide several features like placeholder text(hint), different types of inputTypes, auto-correction, auto-capitalization, etc.

You have to use onChangeText event to read user input

you have to set shopname text value in a state like below:


4. State

There are two types to control components data in react-native one is state and props, let’s look at the state, the state is mutable, this means the state can change in the feature you can assign the different value at run time, and you can define the state in the constructor like below:

In the above example, We change username in the constructor and then assign different value in componentDidMount


5. Props

Props are immutable, this means it cannot be changed, the component receives props from their parent and you can create your components with props, using Props you can use same components multiple time in different places in your app

As you can see in the above example parent class calling child class and pass the message as a props you can also send object from props


6. FlatList

Please check this post to learn FlatList


I will post another post for remaining components, thank you, stay connected

2 Replies to “Introduction of React-native components”

Leave a Reply

Your email address will not be published. Required fields are marked *