React Native Hooks - How use useStates in Styles

Question

I am using hooks to write a react native app. I have problem with using states inside Styles. The background of text container is red, by default and after pressing the Confirm button should be changed to green. At the moment I face error when I use activeBtn as the backgroundColor in style. Please help me to modify my code in correct way.I simplified my code to be more clear as below:

import React, { useState } from "react";
import { StyleSheet, Text, View, TouchableOpacity } from "react-native";

const DifficultScreen = (props) => {
  const [activeBtn, setActiveBtn] = useState("red");
  const confirmHandler = () => {
    setActiveBtn("green");
  };
  return (
    <View>
      <View style={styles.container}>
        <Text style={styles.title}>Difficult screen is showing</Text>
      </View>
      <View>
        <TouchableOpacity onPress={confirmHandler} style={styles.btn}>
          <Text>Confirm</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: activeBtn,
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    height: 90,
    padding: 35,
  },
  title: {
    color: "black",
    fontSize: 18,
  },
  btn: {
    color: "black",
    padding: "10%",
    backgroundColor: "white",
    borderRadius: "5px",
    alignSelf: "center",
    textAlign: "center",
    margin: "5%",
  },
});

export default DifficultScreen;

score 6 · Answer 1 · answered Jan 12 '21 at 15:01

In your case, where only one CSS property has to be modified by an external state, I'd use the solution provided by Pradeepsinh Sindhav or Jagrati.

If you have to pass multiple parameters that would impact many properties inside your StyleSheet, you could get the styles object from, per example, a getStyles function:

import React, { useState } from "react";
import { StyleSheet, Text, View, TouchableOpacity } from "react-native";

const DifficultScreen = (props) => {
  const [activeBtn, setActiveBtn] = useState("red");
  const [height, setHeight] = useState(90);
  const [padding, setPadding] = useState(20);

  const styles = getStyles(activeBtn, height, padding);

  const confirmHandler = () => {
    setActiveBtn("green");
    setHeight(120)
    setPadding(35)
  };

  return (
    <View>
      <View style={styles.container}>
        <Text style={styles.title}>Difficult screen is showing</Text>
      </View>
      <View>
        <TouchableOpacity onPress={confirmHandler} style={styles.btn}>
          <Text>Confirm</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const getStyles = (buttonColor, height, padding) => StyleSheet.create({
  container: {
    backgroundColor: buttonColor,
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    height: height,
    padding: padding,
  },
  title: {
    color: "black",
    fontSize: 18,
  },
  btn: {
    color: "black",
    padding: "10%",
    backgroundColor: "white",
    borderRadius: "5px",
    alignSelf: "center",
    textAlign: "center",
    margin: "5%",
  },
});

export default DifficultScreen;

This is a great solution! helped me so much :) – Jonathan May 08 '23 at 10:01 — Jonathan, May 08 '23 at 10:01

score 3 · Answer 2 · answered Oct 27 '20 at 14:20

style property only support a single object with style properties in it, so you need some way to merge a property inside an style object, actually we can do this using javascript spread operator or by passing the style properties as an array

change this :

<View style={styles.container}>

to

<View style={{...styles.container, backgroundColor: activeBtn}}/>

or to :

<View style={[styles.container, {backgroundColor: activeBtn}]}/>

score 3 · Answer 3 · answered Mar 12 '22 at 15:56

Hello I saw this and have a way I get around this for my own convenience, This is what I do

Assuming this is my external style.js file

import { StyleSheet } from 'react-native';
import { setWidth, setHeigth, height } from '../../utils/config';


type StylesProps = string | null | undefined

const styles = (colorScheme: StylesProps) => {

    console.log(colorScheme,"in style view")

    //Check if app is dark theme
    const isDark = colorScheme === 'dark';

    const a = StyleSheet.create({
        container: {
            flex: 1,
            height: setHeigth(105),
        },
        imgBox: {
            height: setHeigth(70),
            overflow: 'hidden'
        },
        bgImg: {
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'center',
            overflow: 'hidden'
        },
        headerNote: {
            fontSize: setHeigth(4.2),
            fontFamily: 'roboto-regular',
            fontWeight: '600',
            color: isDark ? 'white' : 'black'
        }
    })
    
    return a
}
export default styles;

Then in my component I use the style this way passing the current state as a parameter

const AppView = () => {

  let colorScheme = useColorScheme();
  
  //Check if app is dark theme
  const isDark = colorScheme === 'dark';
  
  return (
    <View style={[styles(colorScheme).container]}>
            <Text style={[tw`pt-6 text-left font-semibold`, styles(colorScheme).headerNote]}>
            Some awesome text
            </Text>
    </View>
  );
    };
    
    export default AppView;

score 1 · Answer 4 · answered Mar 25 '21 at 12:34

im not sure if this is fine and got no warning from react, yet its working great with my theming. also you can use react hooks like useState and add logic inside this customed hook for style. Im doing useStyle instead of style.ts|js

import { StyleSheet } from 'react-native'
import { useTheme } from 'react-native-elements'
import { RFValue } from 'react-native-responsive-fontsize'


export const useStyle = () => {
  const { theme: { colors } }: any = useTheme()

  const styles = StyleSheet.create({
    container: {
      backgroundColor: colors?.text,
      height: RFValue(40),
      width: RFValue(40),
      justifyContent: 'center',
      alignItems: 'center',
      borderRadius: RFValue(4)
    },
  })

  return {
    styles,
    iconColor: colors.secondary,
    iconSize: RFValue(25)
  }
}

But that way the styles object is re-created in each component update... — Jonathan, May 08 '23 at 09:59

score 0 · Answer 5 · answered Apr 20 '20 at 04:51

0

What you can do is use it within the style of the container like so:

change this:

<View style={styles.container}>

to:

<View style={[styles.container, {backgroundColor: activeBtn}]}/>

This is the way to add dynamic styling to component

answered Apr 20 '20 at 04:51

Jagrati

11,474
9
35
56

@JanetPedram consider accepting the answer if it worked. Thanks. – Jagrati Apr 24 '20 at 04:47

score -2 · Answer 6 · answered Apr 20 '20 at 04:45

import React, { useState } from "react"; import { StyleSheet, Text, View, TouchableOpacity } from "react-native";

const DifficultScreen = (props) => {
  const [activeBtn, setActiveBtn] = useState(styles.btnRed);
  const confirmHandler = () => {
    setActiveBtn(styles.btnGreen);
  };
  return (
    <View>
      <View style={styles.container}>
        <Text style={styles.title}>Difficult screen is showing</Text>
      </View>
      <View>
        <TouchableOpacity onPress={confirmHandler} style={activeBtn}>
          <Text>Confirm</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: activeBtn,
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    height: 90,
    padding: 35,
  },
  title: {
    color: "black",
    fontSize: 18,
  },
  btnRed: {
    color: "black",
    padding: "10%",
    backgroundColor: "white",
    borderRadius: "5px",
    alignSelf: "center",
    textAlign: "center",
    margin: "5%",
  },
  btnGreen: {
    color: "green",
    padding: "10%",
    backgroundColor: "white",
    borderRadius: "5px",
    alignSelf: "center",
    textAlign: "center",
    margin: "5%",
  },
});

export default DifficultScreen;

Thanks for your answer but unfortunately this technique does not work for me. — Janet Pedram, Apr 20 '20 at 06:52

React Native Hooks - How use useStates in Styles

6 Answers6