CODEWITHSUNDEEP
react-nativeandroid-collapsingtoolbarlayoutreact-native-reanimated
某亚瑟
某亚瑟

Reputation: 1

How can i make a view like CollapsingToolbarLayout with ReactNative?

I want make a view like this, or like this video

I used react-native-collapsible-tab-view but it is have bugs.

Can I make it with react-native-reanimated and react-native-gesture-handler?

Here is the page structure

<View>
  <Animated.View>
    <FastImage
    style={{weidth: '100%', height: '200'}}
    source={{
      uri: 'some_image.jpg',
    }}
  />
  </Animated.View>
  <Animated.View>
    <TabsProvider defaultIndex={0}>
      <Tabs>
        <TabScreen label='Tab1'>
          <ScrollView>
            <Text>SomeViews</Text>
          </ScrollView>
        </TabScreen>
        <TabScreen label='Tab2'>
          <ScrollView>
            <Text>SomeViews</Text>
          </ScrollView>
        </TabScreen>
      </Tabs>
    </TabsProvider>
  </Animated.View>
</View>

Upvotes: 0

Views: 85

Answers (1)

Iman Maleki
Iman Maleki

Reputation: 644

You can

  • pass onScroll prop to ScrollView form either "react-native" or "react-native-gesture-handler",
  • use useSharedValue from "react-native-reanimated" and update it in handleScroll,
  • add shared value to useAnimatedStyle from "react-native-reanimated", and
  • pass animStyle to the cover view.

Exapmple:

  const animProgress = useSharedValue(0);

  const handleScroll = ({ nativeEvent }) => {
    animProgress.value = Math.min(1, nativeEvent.contentOffset.y / disapearLimit);
  };

  const animStyle = useAnimatedStyle(() => ({
    transform: [ { scaleY: 1 + animProgress.value * (disapearLimit / coverHeight - 1) }, ],
    opacity: 1 - animProgress.value,
  }));

  return (
    <View>
      <Animated.View style={[styles.coverViewWithAbsolutePosition, animStyle]} />
      <View>
        <ScrollView onScroll={handleScroll} scrollEventThrottle={16}>
          {children}
        </ScrollView>
      </View>
    </View>
  );

Alternatively, props passed to useAnimatedStyle could be generated by useDerivedValue.

Upvotes: 1

Related Questions