React Native - unable to pass state variable into style

Question

My code fetches a json file, calculates a value and I want to pass this value into the style of TouchableOpacity. Below is my attempt:

const [height, setHeight] = useState(0)
const [isLoading, setLoader] = useState(true)

const fetching = async () => {
    ...//code that fetches the value
    setHeight(value)
    setLoader(false)
} 

if (isLoading) {
    return (
        <Text> Loading...</Text>
    )
}

return (
    <View>
        <TouchableOpacity
              style={{height: height, width:30, backgroundColor: "red" }} />
         ... //other parts of the return statement 
    </View>

)

the complete code:

<View style={{height: height}}>
     <TouchableOpacity
          style={{width:30, borderWidth:5, marginTop:20, backgroundColor:"blue", height:height}}>
     </TouchableOpacity>
</View>

Any help would be appreciated.

Vlad L · Accepted Answer · 2021-07-01T09:27:54.043

0

I think your useState is fine. However either the parent View doesn't have any space or the TouchableOpacity has nothing to display.

You can try to do:

return (
    <View>
        <TouchableOpacity
              style={{height, width:30, borderWidth: 5 }} />
         ... //other parts of the return statement 
    </View>
)

If you see no border, then it's a problem with the parent View

You can then try:

return (
    <View style={{flex: 1}}>
        <TouchableOpacity
              style={{height, width:30, borderWidth: 5 }} />
         ... //other parts of the return statement 
    </View>
)

You could also try adding a Text component with some text to the TouchableOpacity.

This code:

import React, { useEffect, useState } from 'react';
import {Text, View, TouchableOpacity} from 'react-native';

export default function App() {
  const [height, setHeight] = useState(0)
  const [isLoading, setLoader] = useState(true)

  useEffect(() => {
    const timerTask = setInterval(() => {
      setHeight(Math.random() * 200)
      setLoader(false);
    }, 5000);
    return () => clearInterval(timerTask);
  }, [])

  if (isLoading) {
    return (
      <Text> Loading...</Text>
    )
  }

  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <TouchableOpacity
        style={{width: 30, borderWidth: 5, marginTop: 20, backgroundColor: "blue", height}}>
      </TouchableOpacity>
    </View>
  )
}

Produces a blue touchable opacity that changes height every 5 seconds. Also when I touch it, it turns a lighter shade.

edited Jul 01 '21 at 09:27

answered Jun 28 '21 at 09:15

Vlad L

1,544
3
6
20

I tried to put the border width (like your first code), and the border does appear. It is just that the TouchableOpacity itself did not appear... and just putting 'height' does not work, I must do "height: height" to pass in the state variable. :( – cel-0207 Jun 28 '21 at 10:04
@cel-0207 What do you mean by it did not appear? If you see a border around it, then it is there. You should set a background color to it to make it visible in that case. Instead of borderWidth you can do style={{height, width:30, backgroundColor: 'gray' }} `height` shorthand also should work, unless you're setting an invalid value to it at some point. – Vlad L Jun 28 '21 at 10:19
yep I did put in the backGround color (didn't put it in the code above), but all I can see is the border and the color did not show at all. All I can see is the border over there. I'll update this in the question. – cel-0207 Jun 28 '21 at 15:27
I also tried to add marginTop:20, and all I can see is the blackcolor border shifting down and there is no other color.. – cel-0207 Jun 28 '21 at 15:35
Can you paste the whole component? – Vlad L Jun 28 '21 at 18:27
@cel-0207 I added the full code. It works for me. The rectangle changes height. – Vlad L Jul 01 '21 at 09:28

score 0 · Answer 2 · answered Jun 28 '21 at 09:29

0

It seems to me you might not be passing the style property in the render function of TouchableOpacity, TouchableOpacity is your own custom component, isn't it?

const TouchableOpacity = ({ style }) => {
   ...

   return (
      <div style={style} >
         ...
      </div>
   );

}

answered Jun 28 '21 at 09:29

Krzysztof Woliński

328
1
2
12

TouchableOpacity a react-native component – Vlad L Jun 28 '21 at 09:43
Ok, sorry, I just checked the docs. Does it work if you use the `StyleSheet.create` method for dynamically creating styles instead of passing a plain object? https://reactnative.dev/docs/stylesheet – Krzysztof Woliński Jun 28 '21 at 09:59
@KrzysztofWoliński I tried using stylesheet, but the TouchableOpacity block still does not appear. :( – cel-0207 Jun 28 '21 at 10:04

score -1 · Answer 3 · answered Jun 27 '21 at 19:20

-1

Add a height and width to your element's style

height: 50,
width: '100%',
backgroundColor: "#000000"

answered Jun 27 '21 at 19:20

Arturo Barrios

11
2

There is a style for the TouchableOpacity. – cel-0207 Jun 28 '21 at 05:23

React Native - unable to pass state variable into style

3 Answers3