I am new in React-native flex-box. I have created one Button component by using styled component and Typescript. I made one conditional rendering. My first button I want put all the way bottom of the screen and Second Button I want to put middle of the screen. I made one container which takes two View element. I want to keep my styled component's center view always in the middle and button will display based on condition. My second Button logic works.But for the first button I used justify-content: space-between but then both of the elements goes end of screens. I tried lots of way to keep the center view in the middle and first bottom will go bottom of the screen but I could not able do that. Ps: My English is not good, if you don't understand please let me know.
I share my code in snack
import React from 'react'; import styled from 'styled-components/native'; import Button from './components/Button'; This is my buttoninterface Props { condition: boolean;}const Container = styled.View<Props>` width: 100%; height: 100%; background-color: white; justify-content: ${({ condition }: Props) => condition ? 'space-between' : 'center'};`;const Center = styled.View` // I want to keep this Center always in the middle justify-content: center; align-items: center;`;const TitleText = styled.Text` padding-top: 20px; padding-horizontal: 20px; text-align: center;`;const DescriptionText = styled.Text` text-align: center; padding: 20px;`;const MenuContainer = styled.View` // this is the Button container width: 100%;`;const Login = ({condition = false}: Props) => { // if you make it true it will display first button return (<Container {...{condition}}><Center><TitleText>login</TitleText><DescriptionText>Create an account</DescriptionText></Center><MenuContainer> { condition ?<Button title="First Button" />:<Button title="second Button" /> }</MenuContainer></Container> );};export default Login;