CODEWITHSUNDEEP
react-nativereact-native-ios
Vikas Acharya
Vikas Acharya

Reputation: 4152

how to change single style in reactive native styles

I have a default style

const styles = StyleSheet.create({
  textStyle : {
    fontSize : 20,
    fontWeight : "bold",
    color : "red",
    margin : 20
  }
});

now I applied it to various text fields,

<ScrollView>
      <Text style={styles.textStyle}>Hello World React Native</Text>
      <View>
        <Text style={styles.textStyle}>1234567</Text>
      </View>
</ScrollView>

I just want the numbers to be in green with all other styles. How to achieve that.

I tried something like below, which didn't worked.

styles.textStyle.color("green")

Upvotes: 0

Views: 41

Answers (2)

Dhevendhiran M
Dhevendhiran M

Reputation: 1263

As mentioned in the previous answer, you can override with the code itself.

<ScrollView>
      <Text style={styles.textStyle}>Hello World React Native</Text>
      <View>
        <Text style={[styles.textStyle, { color: "green" }]}>1234567</Text>
      </View>
</ScrollView>

or If you want styles in a separate file or constant, you can use it like,

const styles = StyleSheet.create({
  textStyle : {
    fontSize : 20,
    fontWeight : "bold",
    color : "red",
    margin : 20
  },
  numberStyle : {
    color: "green"
  }
});

    <ScrollView>
          <Text style={styles.textStyle}>Hello World React Native</Text>
          <View>
            <Text style={[styles.textStyle, styles.numberStyle]}>1234567</Text>
          </View>
    </ScrollView>

Please revert back to me, If you need more info.

Upvotes: 1

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16334

You can override the styles like below

 <Text style={[styles.textStyle,{color:'green'}]}>1234567</Text>

Upvotes: 2

Related Questions