CODEWITHSUNDEEP
react-native
Manspof
Manspof

Reputation: 357

react native 2 colors as background

I'm trying to make 2 colors of background using flex, and it seems to work good but I want to make the button on the middle as in the photo, where I need to insert the button in the code? i want it to be like this:

enter image description here

     return (
            <View style={container}>
                <View style={leftContainer}>
                </View>
                <View style={rightContainer}>
                </View>
                <Button 
                    title="button"/>
            </View>
        )
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection:'row'

    },
    leftContainer:{
        flex:1,
        backgroundColor: '#ca8afa',    
    },
    rightContainer:{
        flex:1,
        backgroundColor: '#96d0e3'

    },
    addButton: {
      justifyContent: 'center',
      alignItems: 'center',
      position: 'absolute',
      bottom: 20,
      right: 20,
      zIndex: 1111,
      width: calcSize(192 / 2),
      height: calcSize(192 / 2)
    }
  })

the problem is that the button is also in the row now and not in the middle, how can i fix it?

Upvotes: 7

Views: 9862

Answers (1)

user926721
user926721

Reputation:

Here's a live demo of a possible solution: https://snack.expo.io/HJFL7A3ez

Edit - Adding the code here as well:

export default class App extends Component {
  render() {
        return (
            <View style={styles.container}>
                <View style={styles.leftContainer}>
                </View>
                <View style={styles.rightContainer}>
                </View>
                <View style={styles.buttonContainer}>
                  <Button style={styles.addButton} title="button"/>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      flexDirection:'row'

  },
  leftContainer:{
      flex:1,
      backgroundColor: '#ca8afa',    
  },
  rightContainer:{
      flex:1,
      backgroundColor: '#96d0e3'

  },
  buttonContainer: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  addButton: {
    zIndex: 1111,
    width: 200
  }
})

Upvotes: 10

Related Questions