Studying React-Native is like — 5 (Layouts & Flexbox, Hook & Events Handling)

Flexbox is a key approach which is basically a collection of css properties that you use to control how things look like.

It is very similar to browser CSS flexbox.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button ,TextInput} from 'react-native';

export default function App() {
  return (
    <View style={styles.first_thing}>
      <View style={styles.inputContainer}>
        <TextInput style={styles.textin} placeholder='this is input!'/>
        <Button title='add your thing!' />
      </View>
      <View >
        <Text> more text will be added from here </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  first_thing: {
    padding : 50,
    textAlign : 'center'
  },
  inputContainer : {
    flexDirection: 'row',
    justifyContent : 'space-between'
  },

  textin : {
    borderWidth : 1,
    borderColor : '#cccccc',
    width:'50%',
    marginRight : 8,
    padding : 8
  }

});

We’ve added inputContainer and textin into styles. FlexDirection is a thing that you can align components with row or columns. Moreover, JustifyContent is a thing that allow you to whether you make space between components or not.

So i added inputcontainer into second View components and added textin to textinput components.

The result is above.

Before talking about Flexbox, there are things such as main axis, cross axis.

If main axis is left to right, cross axis is top to bottom.

Flexbox is a layout model that align web/apps elements with main axis using row or cols. It is useful for responsive web/apps. Moreover, we call it as one-dementional thing because we can’t control main axis and cross axis at the same time. Default of main axis is from left to right and Efault of cross axis is from top to bottom.

Let’s see flex elements.

flexDirection : deciding which axis should be main axis. ex) row(from left to right), row-reverse, column(from top to bottom), column-reverse

flexWrap : forcing items to be in one array. ex) nowrap(align items in one array. It is a default), wrap(align items by space), wrap-reverse

AlignItems : align crossing with Flex Direction. ex) flex-start, center, flex-end, stretch(we use this method from child elements), baseline

Justify Content : align like horizon with Flex Direction. ex) flex-start, center, flex-end, space-between, space-around

Thus, you can organize how items are aligned with flexDirection, justifyContent, alignItems.

Then, What is hook?

Hook is a function that connect React state and lifecycle features. There are three basic hook such as ‘useState’(state managing), ‘useEffect’(event handling), ‘useContext’(sharing information) .

import {useState} from 'react'

const [value, valuehandler] = useState(default_value)

‘useState’ will be rendered everytime value is updated.

This is a code that counting how many times button is clicked.

import React, {useState} from 'react' //useState import
import {SafeAreaView, Text, Button} from 'react-native'

export default function App() {
  
  const [count, setCount] = useState(0) 

  return(
    <SafeAreaView style={{padding:'5%', justifyContent:'space-evenly', alignItems:'center'}}>
      <Text>{count}</Text>
      <Button title={'click'} onPress={() => setCount(count + 1)}/>
    </SafeAreaView>
  )
}​​

So, ‘onPress = P{() => setCount(count+1)}’ is a thing when you press the button, count will be increased one by setCount.

This is code before i used and i added more things like states and events handling functions.

import { useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button ,TextInput} from 'react-native';

export default function App() {

  const [enteredText, setenteredText] = useState("")

  function textInputHandler(enteredText) {
    setenteredText(enteredText)
  };

  //We need to turn function argument into state.
  function activateHandler(){
    console.log(enteredText)
  };



  return (
    <View style={styles.first_thing}>
      <View style={styles.inputContainer}>
        <TextInput 
        style={styles.textin} 
        placeholder='this is input!'
        onChangeText={textInputHandler}/>
        <Button title='add your thing!' 
        onPress={activateHandler}/>
      </View>
      <View style={styles.textcontainer}>
        <Text> more text will be added from here </Text>
      </View>
    </View>
  );
}

First, i made ‘enteredText’ as state and setenteredText for handler. Adding textInputHandler and activateHandler to get input and output it.

So logic is like this. We get input by TextInput and textInputHandler is worked at the same time. and then setenteredText is worked at the same time by updating enteredText. When user click the button after entering inputs, activateHandler function will be called and make a output.