Just A Common Pattern in React Native

ViewScreen.js

import React from 'react';
import { StyleSheet, Text, View, Animated, Image } from 'react-native';
import { deviceHeight, deviceWidth } from '../../helpers/constants';
import { WHITE } from '../../helpers/styleConstants';
import ContentLoader from 'rn-content-loader';
import { Rect } from 'react-native-svg';

// Have react-native-svg and rn-content-loader installed and linked to your project

export const LoadingSkillAtom = (props) => {
  return (
    <ContentLoader
      height={120}
      width={(deviceWidth - 80) / 2}
      speed={4}
      primaryColor="#f3f3f3"
      secondaryColor="#ecebeb"
    >
      <Rect x="0" y="0" rx="12" ry="12" width={(deviceWidth - 80) / 2} height="100" />
    </ContentLoader>
  )
}

const TOP_IMAGE_HEIGHT = 400;

const ChatScreen = (props) => {
  const scrollY = new Animated.Value(0);
  return (
    <View style={[styles.container]}>
      <Image
        source={require('../../assets/images/background1.jpg')}
        style={[
          styles.topImage,
          {
            height: 400
          }
        ]} />
      <Animated.ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{
          paddingBottom: 200,
          backgroundColor: WHITE
        }}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
          // { useNativeDriver: true },
          () => { },          // Optional async listener
        )}
        style={[styles.scrollViewContainer]}>
        <Animated.View>
          <Animated.View style={[
            styles.block1,
            {
              borderTopLeftRadius: 35,
              borderTopRightRadius: 35
            }
          ]}>
            <View style={{
              marginTop: 40,
              marginLeft: 20,
              marginRight: 20,
              display: 'flex',
              flexDirection: 'row',
              flexWrap: 'wrap',
              justifyContent: 'space-around',
            }}>
              <LoadingSkillAtom />
              <LoadingSkillAtom />
              <LoadingSkillAtom />
              <LoadingSkillAtom />
              <LoadingSkillAtom />
              <LoadingSkillAtom />
              <LoadingSkillAtom />
            </View>
          </Animated.View>
        </Animated.View>
      </Animated.ScrollView>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: WHITE,
    display: 'flex',
    flex: 1,
    height: deviceHeight,
    alignContent: 'center',
    alignItems: 'center',
    justifyContent: 'center'
  },
  scrollViewContainer: {
    paddingTop: TOP_IMAGE_HEIGHT,
  },
  topImage: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    overflow: 'hidden',
  },
  block1: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
    backgroundColor: WHITE,
    marginTop: -100,
    width: deviceWidth,
    height: deviceHeight
  }
})

export default ChatScreen;