flexbox

flexbox: 하나의 플렉스 아이템이 자신이 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성

import { StyleSheet, Text, View,Button, TextInput } from 'react-native';

export default function App() {
  return (
    <View style={styles.appContainer}>
    <View style={styles.inputContainer}>
     <TextInput style={styles.textInput} placeholder='dmdkk'/>
     <Button title='add goal'></Button>
    </View>
    <View>
      <Text>list iof goal...</Text>
    </View>
    </View>
  );
}

const styles = StyleSheet.create({
  appContainer:{
    padding:150,
  },
  inputContainer:{
    flexDirection:'row',
    justifyContent:'space-btween',
  },
  textInput:{
    borderWidth:1,
    borderColor:'blue',
    width:'80%',
    marginRight:8,
    padding:8,
  }
});