CODEWITHSUNDEEP
react-native
user16723769
user16723769

Reputation:

How can i put my button at the bottom of the screen?

I want to put my button at the bottom of the screen, that button it should be fixed, i try like this:

<SafeAreaView>
            <FlatList
                horizontal
                data={DATA}
                renderItem={renderItem}
                keyExtractor={item => item.id}
            />
           
            <View style={styles.mainConatinerStyle}>
                <Button style={styles.floatingMenuButtonStyle} onPress={() => { }}>
                    Add
                </Button>
            </View>

        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    mainConatinerStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }, floatingMenuButtonStyle: {
        position: 'static',
        bottom: 10,
        right: 10
    }
})

but it does not show me the button, there is not the button in the screen, what i am doing bad?

Upvotes: 0

Views: 1689

Answers (1)

crystal_17
crystal_17

Reputation: 737

You can use position: 'absolute' please try to update as following:

<SafeAreaView style={styles.container}>
  <FlatList
    horizontal
    data={DATA}
    renderItem={renderItem}
    keyExtractor={item => item.id}
  />
         
  <Button style={styles.floatingMenuButtonStyle} onPress={() => { }}>
    Add
  </Button>
</SafeAreaView>


const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  mainConatinerStyle: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }, 
  floatingMenuButtonStyle: {
    position: 'absolute', // should be 'absolute'
    bottom: 10,
    right: 10
  }
})

Upvotes: 0

Related Questions