React native layout fixed width and stretch remaining space

Question

How can I make something like this in react-native ?

In the right I want a component that has a fixed width, and in the left taking all the remaining space another component.

Answer 1

Try this:

  <View style={{flex: 1, flexDirection: 'row'}}>
    <View style={{
      backgroundColor: 'blue',
      flexGrow: 1,
    }}>
      <Text>Fluid</Text>
    </View>
    <View style={{
      backgroundColor: 'red',
      width: 100,
    }}>
      <Text>Fixed</Text>        
    </View>
  </View>