CODEWITHSUNDEEP
react-nativereact-native-ios
Michael S
Michael S

Reputation: 1

React Native - Change Stylesheet Dynamically

Im coding a project in react native which requires rtl support (english and arabic). I however am experimenting with my own code rather then using a rtl plugin. Straight to the point i want to know is it possible that i can dynamically change stylesheet , so that all classes where : position:absolute. If it has a property left or right, to inverse it?

Fo example if a class is positioned absolutely, and has the : Left:20,

Can i automagically make this become : Right:20,

And same for the other way around? Is this possible in react native.

Upvotes: 0

Views: 3462

Answers (1)

patngo
patngo

Reputation: 687

Yes, you can do something like 

const styles = StyleSheet.create({
  yourView: {
    left: isRight ? 0 : 20,
    right: isRight? 20: 0,
  },
});

Where isRight is a variable you've defined previously

Another approach would be to create to separate it into different styles and attach the styles on render. Something like

const styles = StyleSheet.create({
  yourView: {
    ...common styles here
  },
  leftView: {
    left: 20,
  },
  rightView: {
    right: 0,
  },
});

Then in the render method u would attach the styles as:

render() {
  return (
    <View styles={[styles.mainView, isRight ? styles.leftView : styles.rightView]}/>
  )
}

Upvotes: 1

Related Questions