Bacancy Technology

Bacancy Technology represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

World wide offices

12+

Years of Experience

Agile Coaches

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

React Native

July 18, 2024

React Native Styling Width: Percentage – Number

You can modify your styles to depend on React Native’s flex attributes to develop a layout where the AutoComplete component covers the remaining space and the icon has a fixed width. Here’s how to go about it:

import React from 'react';
import { StyleSheet, View } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <View style={styles.subContainer}>
          {/* AutoComplete component goes here */}
        </View>
        <View style={styles.icon}>
          {/* Icon goes here */}
        </View>
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 100,
  },
  row: {
    flexDirection: 'row',
    height: 50,
  },
  subContainer: {
    flex: 1,
    backgroundColor: 'dodgerblue',
  },
  icon: {
    width: 50,
    backgroundColor: 'greenyellow',
  },
});
export default App;