React native styling. width: percentage - number

css, react-native, reactjs

Solution

I'd agree with Viktor, you should be able to achieve this using Flex Box.

Here's something I put together: https://snack.expo.io/B1jDKOhyb

You set the `flexDirection` of the formRow to `row`, and then the first child (the holder `View` for your AutoComplete component to `flex: 1`. This makes it fill all available space. The next child `View` is your icon holder. Which you can set to whatever value you want (in this case 50).

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.formRow}>
          <View style={styles.formItem}>
            // AutoComplete component goes here
          </View>
          <View style={styles.formIcon}>
           // Icon goes here
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 100
  },
  formRow: {
    flexDirection: 'row',
    height: 50,
  },
  formItem: {
    flex: 1,
    backgroundColor: 'dodgerblue',
  },
  formIcon: {
    width: 50,
    backgroundColor: 'greenyellow',
  },
});

Problem

I want to do `width: 100% - 50` so I can add an icon which is 50 wide on the right hand side of it. I have got `width: 100% - 20%` working by using react-native-extended-styles but I don't see why that is useful because you can do `width: '80%'`. I cannot get `width: 100% - 50` working. Is there a way? Trying to use the `onLayout` event to get the container width, then set the `<autocomplete>` to `100% - 50` of the container width but it isn't working. ``` let Location = (props) => { let locationInputElement const blur = () => { locationInputElement.blur() } let inputContainerWidth return ( <View style={styles.formItem}> <View onLayout={(event) => { inputContainerWidth = event.nativeEvent.layout.width console.log(inputContainerWidth) }} <Autocomplete data={props.autocompleteResults.predictions}... style={{ borderRadius: 8, backgroundColor: 'red', alignSelf: 'stretch', paddingLeft: 10, position: 'relative', ...styles.label, ...styles.labelHeight, width: inputContainerWidth - 50 }} /> </View> </View> ) } ``` It does console.log `335` when it console.logs `inputContainerWidth` but the width of the `<autocomplete>` is 100% still.

Original source