alignSelf Does not make any change with layout "React native"

Question

JSX expression of the component as given below

<ImageBackground source={require('../images/background.jpg')} 
      style={styles.container}>        
        <View style={styles.container}>
            <View style={styles.viewStyleOne}>
                <Text style={styles.textStyle}> 1 </Text>
            </View>

            <View style={styles.viewStyleTwo}>
                <Text style={styles.textStyle}> 2 </Text>
            </View>

            <View style={styles.viewStyleThree}>
                <Text style={styles.textStyle}> 3 </Text>
            </View>
        </View>
</ImageBackground>

Style

const styles = StyleSheet.create({
container:{
    flex: 1,
    flexDirection:'row',
    alignItems:'center', 
    justifyContent: 'center'
},
viewStyleTwo : {
    width:100,
    height:40,
    justifyContent : 'center',
    alignItems:'center', 
    backgroundColor: '#4DF25F'
},
viewStyleOne :{
    width:40,
    height:40,
    justifyContent : 'center',
    alignItems:'center', 
    backgroundColor: '#B54BF1',
    alignSelf : 'flex-start'
},
viewStyleThree:{
    width:40,
    height:40,
    justifyContent : 'center',
    alignItems:'center', 
    backgroundColor: '#F3B54E'
},
textStyle:{
    textAlign:'center'
}});

viewStyleOne class contains a property alignSelf , But did not make any change, It should be at the top of the screen

The expected output should be as given in the screenshot

Answer 1

Can you try the following,

const styles = StyleSheet.create({
    container:{
        flex: 1,
        top: 0, 
        // Option 01
        height: "100%", // Added
        // OR  // Option 02
        // bottom: 0,
        // left: 0,
        // right : 0,
        // position: 'absolute',
        flexDirection:'row',
        alignItems:'center', 
        justifyContent: 'center',
        backgroundColor: 'green'
    },
    viewStyleTwo : {
        width:40,
        height:40,
        justifyContent : 'center',
        alignItems:'center', 
        backgroundColor: '#4DF25F'
    },
    viewStyleOne :{
        width:40,
        height:40,
        justifyContent : 'center',
        alignItems:'center', 
        backgroundColor: '#B54BF1',
        alignSelf : 'flex-start'
    },
    viewStyleThree:{
        width:40,
        height:40,
        justifyContent : 'center',
        alignItems:'center', 
        backgroundColor: '#F3B54E'
    },
    textStyle:{
        textAlign:'center'
    }});

Gives this UI