<Image source={{uri: 'https://reactnative.dev/docs/assets/p_cat2.png', }}
          style={{ width: 250, height: 200 }}
/>
//------------------------------------------------
// texbox

<TextInput
        style={styles.input}
        onChangeText={onChangeNumber}
        value={number}
        placeholder="useless placeholder"
        keyboardType="numeric"
		//defaultValue="Name me!"
      />
          
        
//------------------------------------------------        
//funtion 
const Cat = (props) => { return (
    <View>
      <Text>Hello, I am {props.name}!</Text>
    </View>
  );}
       


 // call funtion <Cat />

    <Cat name="Maru" />

//-----------------------------------------------   
// list view
      
const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 80
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});

const FlatListBasics = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={[
          {key: 'Devin'},
          {key: 'Dan'},
          {key: 'Dominic'},
          {key: 'Jackson'},
          {key: 'James'},
          {key: 'Joel'},
          {key: 'John'},
          {key: 'Jillian'},
          {key: 'Jimmy'},
          {key: 'Julie'},
        ]}
        renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
      />
    </View>
  );
}

export default FlatListBasics;   

// show the list off item 
//renderitem will list down the name
      
//--------------------------------
// for button 

export default class ButtonBasics extends Component { _onPressButton() 
{ 
alert('You tapped the button!')
}

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          
         	 	<Button onPress={this._onPressButton} title="Press Me"/>
        </View>
        <View style={styles.buttonContainer}>
          		
          		<Button onPress={this._onPressButton} title="Press Me" color="#841584" />
        </View>
        <View style={styles.alternativeLayoutButtonContainer}>
          
          		<Button onPress={this._onPressButton} title="This looks great!" />
          		<Button onPress={this._onPressButton} title="OK!" color="#841584" />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   justifyContent: 'center',
  },
  buttonContainer: {
    margin: 4
  },
  alternativeLayoutButtonContainer: {
    margin: 40,
    flexDirection: 'row',
    justifyContent: 'space-between'
  }
});