How would you do that opening effect with React Native?-CodePudding

Imagine a feed of items and then you click on one item and it opens in this way. We need to create a news app that has this identical animation (check sec 00:13 of video linked). enter link description here

CodePudding user response：

You can use the react-native-collapsible package to achieve something like this https://github.com/oblador/react-native-collapsible

CodePudding user response：

One way to do this is to do dynamic styling.

like this:

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


const Component = () => {
  const [isOpen, setisOpen] = React.useState(false);

  return (
    <TouchableOpacity onPress={() => setisOpen(!isOpen)}>
      <View>
          {/* The View content that is always open */}
      </View>


      <View style={isOpen ? { disply: "flex" } : { disply: "none" }}>
        {/* The View content to be opened/hidden */}
      </View>

      
    </TouchableOpacity>
  );
};

then you can just import this component in your screen like this:

<Component  />