Smooth parallax effect not responding properly

Jay Vijay Modi — Sat, 21 Aug 2021 16:37:00 +0000

Currently what I'm trying to achieve is this, where 1 image moves from left to right as the user scrolls down creating a parallax effect:

Normally with DOM I would use:

let image = document.getElementById("image");

window.addEventListener('scroll', function() {
  let value = window.scrollY;
  image.style.marginRight = value * 4 + 'px';
  image.style.marginTop = value * 1.5 + 'px';
}

But currently I'm trying to replicate this effect in React using setState, but the image doesn't move along with mouse scroll wheel and the layout does not seem right:

CodeSandBox: https://codesandbox.io/s/modest-hill-2wuko?file=/src/App.tsx

Code:

const [leftScroll,setLeftScroll] = useState(false);
const [topScroll,setTopScroll] = useState(false);
const [textScroll, setTextScroll] = useState(false);

  useEffect(function onFirstMount() {
    const changeBackground = () => {
      let value =  window.scrollY;
      console.log(window.scrollY);

      if(value>0 && value<200){
        setLeftScroll(true)
        setTopScroll(true)
        setTextScroll(true);
      }else{
        setLeftScroll(false)
        setTopScroll(false)
        setTextScroll(false);
      }
    }

    window.addEventListener('scroll', changeBackground);

    return null;
  }, []);
  return (
    <div className="background">
     <div style={{backgroundColor:"#0E2043",padding:"50px",height:"1000px",display:"flex",justifyContent:"center"}}>
      <div style={{color:"#fff",textAlign:"center",fontSize:"100px",fontFamily:"Roboto", display:"flex",justifyContent:"center"}}>Vanuatu</div>
      <img className="image"
              style={{marginRight:leftScroll ? '300px' : '0px',transition:"2s",marginTop:topScroll ? "300px" : "0px"}}
              src="https://cdn.britannica.com/87/122087-050-1C269E8D/Cover-passport.jpg"
            />
       <div
          className="text"
          style={{
            marginTop: textScroll ? "300px" : "800px",
            transition: "4s",
            marginLeft: "120px"
          }}
        >
          Minimum Investment
        </div>
    </div>
    </div>

So is there an easier way to do this or can I implement those DOM functions in my React project and still have a parallax like effect?

Using useState to edit the style of a Component in React Native

Jay Vijay Modi — Sun, 08 Aug 2021 12:23:48 +0000

I am new to using state management and was finding difficulty editing styles of a component using useState. Currently I have a swiper component that holds my main images and below that I have a thumbnail gallery for each of those images with a borderWidth:1. What I want is that only the border for the current slide should be active while the others show no borderWidth. Currently my display looks like this where all the thumbnails have a border:

export default function App() { 

    const [activeBorder, setActiveBorder] = useState();
      const [activeIndex, setActiveIndex] = useState();
      const fishMapping = ["Fish Azure", "Fish Salmon", "Fish Another"];
      const onIndexChanged = (index) => setActiveIndex(index);

      return (
        <View style={{ flex: 1 }}>
          <ImageBackground
            style={globalStyles.backgroundImage}
            source={require('./resource/images/bg1080.jpeg')}
          >
          <Fish onIndexChanged={onIndexChanged}/>
          <BottomImages />
          { activeIndex && <Text>`Fish` ${fishMapping[activeIndex]}</Text> }
          </ImageBackground>
        </View>
      );
    }

And for the thumbnails below this is my code:
BottomImages.js:

export default class BottomImages extends Component { 

    state = {
        columns: 3,
      };

      render() {
        const { columns } = this.state;
        return (
          <View style={styles.container}>
            <FlatList
              numColumns={columns}
              data={[
                require('../resource/images/AzureDamsel.png'),
                require('../resource/images/BicolourAngelfish.png'),
                require('../resource/images/ClownTriggerfish.png'),
              ]}
              renderItem={({ item }) => {
                return (
                  <ListItem
                    itemWidth={(ITEM_WIDTH - 10 * columns) / columns}
                    image={item}
                  />
                );
              }}
              keyExtractor={(index) => {
                return index;
              }}
            />
          </View>
        );
      }
    }

ListItem.js which holds my thumbnail images as well as the borderbox for the images:

const ListItem = (props) => {  

      const { itemWidth } = props;

      return (
        <TouchableWithoutFeedback>
          <Animated.View
            style={{
              margin: 5,
            }}>
            <Image
              style={{
                width: itemWidth,
                height: 50,
                borderWidth: 1,
                borderColor: '#000',
              }}
              source={props.image}></Image>
          </Animated.View>
        </TouchableWithoutFeedback>
      );
    };

Here's a link to the snack just in case: Sandbox

DEV Community: Jay Vijay Modi

Smooth parallax effect not responding properly

Using useState to edit the style of a Component in React Native