CODEWITHSUNDEEP
react-native
Jay0Lu
Jay0Lu

Reputation: 318

React Native: Fix view width

I want to put two view with 4:6 width in my app, and put text inside them.

import React, { Component } from 'react';
import { AppRegistry, View , Text} from 'react-native';

class FixedDimensionsBasics extends Component {
  render() {
    return (
      <View style={{flex:1, flexDirection: "row"}}>
        <View style={{flex:0.4, backgroundColor: 'powderblue'}}>
          <Text>sfasdfadsfdasfas</Text>
        </View>
        <View style={{flex:0.6, backgroundColor: 'skyblue'}}>
            <Text>sfasdfadsfdasfas</Text>
        </View>
      </View>
    );
  }
}

AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);

I want it like this I want it like this

but when I add text in side, it becomes like this but when I add text in side, it becomes like this

Question: Is there a way to keep the view with fixed width and make text adjust with the width?

Thanks!

p.s. I use the React Native Doc for code example & debug.

Upvotes: 1

Views: 1030

Answers (1)

Jay0Lu
Jay0Lu

Reputation: 318

So I found an answer. Using flexBasis:0.4.

import React, { Component } from 'react';
import { AppRegistry, View , Text} from 'react-native';

class FixedDimensionsBasics extends Component {
  render() {
    return (
      <View style={{flex:1, flexDirection: "row"}}>
        <View style={{flex:0.4, flexBasis:0.4, backgroundColor: 'powderblue'}}>
          <Text>sadfsfsdfasdfdsfasdsadfasdf</Text>
        </View>
        <View style={{flex:0.6, flexBasis:0.6, backgroundColor: 'skyblue'}}>
            <Text>fasddfsadfsaf</Text>
        </View>
      </View>
    );
  }
}

AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);

Then the view fixed with 0.4 width. enter image description here

Here is the description for flex-base in CSS CSS trick flex-base

Upvotes: 3

Related Questions