Is it a good idea to utilize flex in react native by creating custom components that retrieve flex values? I previously used the bootstrap grid system and now I am exploring react native.
Is there a way to implement this example using react-native bootstrap on the stack?
let FlexContainer = ({direction,children}) =>{
console.log(direction)
var style = {
flexDirection:direction || 'row',
display:'flex',
width:'100%',
height:'100%'
}
return(<div style={style}>{children}</div>)
}
let FlexBox = ({val, color, children}) => {
return (
<div style={{backgroundColor:color, flex:val}}>{children}</div>
)
}
class LayoutExample extends React.Component {
constructor(props){
super(props)
}
render(){
return(
<div className='screen'>
<FlexContainer>
<FlexBox val={1} />
<FlexBox color="blue" val={1} />
<FlexBox color="red" val={1} />
</FlexContainer>
</div>
)
}
}
ReactDOM.render(<LayoutExample />,document.getElementById('example')).screen {
width:400px;
height:300px;
border:2px solid black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="example"></div>Is this methodology considered valid or not?