react-native-stories-festo/src/components/OneStory/OneStoryUser.js

Story component for React Native.

import Image from "react-native-fast-image";
import {isEmpty, isNull} from "lodash";
import LinearGradient from "react-native-linear-gradient";
import React from "react";
import {Text, TouchableOpacity, View} from "react-native";
import useStyle from "./styles";
import {useSelector} from "react-redux";
import {BaseColors} from "@config/theme";
import {SvgXml} from "react-native-svg";

import iconAddStory from "./../../assets/svg/addStory.svg"

const OneStoryUser = ({item, index, onPress, onCreate}) => {
  const styles = useStyle();

  const { userData } = useSelector((state) => state.auth);
  const myStory = (userData?.id === item?.user_id)

  return (
    <View
      key={index}
      style={[
        styles.storyView,
        { marginLeft: myStory
            ? 25
            : 0
        }
      ]}
    >
      <TouchableOpacity
        onPress={(myStory && isEmpty(item?.stories)) ? onCreate : onPress}
      >
        <LinearGradient
          //якщо у мого друга знайдена історія із параметром view === true, тоді коло обвожу фіолетовим
          //якщо у мене stories пусте, тоді у мене немає історій і я вивожу сіре коло
          colors={!!(!isEmpty(item?.stories) && item?.stories?.find(story => story?.view)) || (myStory && isEmpty(item?.stories))
            ? [BaseColors.lightRed, BaseColors.lightRed]
            : ['rgba(66, 1, 254, .95)', 'rgba(153, 84, 240, .95)']
          }
          start={{ x: 0, y: -.44 }}
          end={{ x: 0, y: .99 }}
          style={styles.storyAvatarGradient}
        >
          <Image
            style={styles.storyAvatarImg}
            source={
              !isEmpty(item?.photo)
                ? { uri: item.photo }
                : require('@assets/Images/noAvatar.png')
            }
          />
        </LinearGradient>

        {myStory && (<TouchableOpacity
          onPress={onCreate}
          style={{
            position: 'absolute',
            top: 45,
            left: 45
          }}
        >
          <SvgXml xml={iconAddStory}/>
        </TouchableOpacity>)}

        <Text
          style={[
            styles.storyLabel,
            { color: myStory
              ? BaseColors.primarySecond
              : BaseColors.profileFriendName
            }
          ]}
          numberOfLines={1}
        >
          { myStory
            ? `You`
            : `${item?.name}`
          }
        </Text>
      </TouchableOpacity>
    </View>
  )
}

export default OneStoryUser;