react-native-gesture-handler#TouchableOpacity JavaScript Examples

export default function DirectMessageScreen() {
  return (
    <>
      <FlatList
        style={{backgroundColor: '#000', flex: 1}}
        data={data}
        renderItem={() => (
          <>
            <DirectMessageSearch />
            <Title />
            <MessagesList />
          </>
        )}
      />
      <TouchableOpacity>
        <View
          style={{
            backgroundColor: colors.bottomBackGround,
            height: 45,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <View style={{flexDirection: 'row', alignItems: 'center'}}>
            <Image
              source={images.dmBottomCamera}
              style={{width: 25, height: 25}}
            />
            <Text style={{color: '#4296f5', marginStart: 10}}>Camera</Text>
          </View>
        </View>
      </TouchableOpacity>
    </>
  );
}

TakePictureButton = styled.TouchableOpacity`
  position: absolute;
  bottom: 80px;
  background-color: #2165e3;
  height: 70px;
  width: 70px;
  z-index: 1;
  shadow-offset: 0 2px;
  shadow-radius: 2px;
  shadow-opacity: 0.5;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  align-self: center;
`

export default function StoryCamera() {
  //StatusBar.setHidden(false);

  const takePicture = async function (camera) {
    const options = {quality: 0.5, base64: true};
    const data = await camera.takePictureAsync(options);
    //  eslint-disable-next-line
    console.log(data.uri);
  };

  return (
    <RNCamera
      style={Styles.cameraContainer}
      type={RNCamera.Constants.Type.back}
      flashMode={RNCamera.Constants.FlashMode.on}>
      {({camera}) => {
        return (
          <View style={Styles.captureCircle}>
            <TouchableOpacity onPress={() => takePicture(camera)}>
              <View style={Styles.captureButton}></View>
            </TouchableOpacity>
          </View>
        );
      }}
    </RNCamera>
  );
}

export default function EditProfileButton() {
  return (
    <TouchableOpacity>
      <View style={{marginTop: 10}}>
        <View
          style={{
            flex: 1,
            height: 30,
            borderRadius: 5,
            marginStart: 10,
            marginEnd: 10,
            backgroundColor: '#000',
            justifyContent: 'center',
            borderColor: '#262626',
            borderWidth: 1,
          }}>
          <View style={{alignItems: 'center'}}>
            <Text style={{color: 'white'}}>Edit Profile</Text>
          </View>
        </View>
      </View>
    </TouchableOpacity>
  );
}

function Test() {
  return (
    <View style={{flex: 1}}>
      <TouchableOpacity
        onPress={() => console.log('Pressed Profile Grid Image')}>
        <Image
          source={{uri: 'https://picsum.photos/1920/1080'}}
          style={{
            height: 150,
            flex: 1,
            marginEnd: 2,
            marginBottom: 2,
            alignItems: 'center',
          }}
        />
      </TouchableOpacity>
    </View>
  );
}

export default function ProfileHeader() {
  return (
    <View style={Styles.container}>
      <TouchableOpacity>
        <Image
          source={{uri: 'https://picsum.photos/600'}}
          style={Styles.prfilePicture}
        />
      </TouchableOpacity>

      <View style={Styles.container2}>
        <View style={Styles.container3}>
          <TouchableOpacity>
            <Text style={Styles.numberContainer}>10</Text>
            <Text style={Styles.text}>Posts</Text>
          </TouchableOpacity>
        </View>
        <View style={Styles.container3}>
          <TouchableOpacity>
            <Text style={Styles.numberContainer}>160</Text>
            <Text style={Styles.text}>Followers</Text>
          </TouchableOpacity>
        </View>
        <View style={Styles.container3}>
          <TouchableOpacity>
            <Text style={Styles.numberContainer}>100</Text>
            <Text style={Styles.text}>Following</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
}

export default function GridIcon() {
  return (
    <View
      style={{
        justifyContent: 'center',
        alignSelf: 'center',
        marginVertical: 10,
      }}>
      <TouchableOpacity>
        <Image source={images.grid} style={{width: 25, height: 25}} />
      </TouchableOpacity>
    </View>
  );
}

CategoryButton = ({
  resourceType, label, isActive, selectResourceTypeAction, hasCollectionItems, hasHighlightedItems,
}) => (
  <TouchableOpacity
    style={[styles.button, isActive ? styles.selected : null]}
    onPress={() => selectResourceTypeAction(resourceType)}
  >
    {hasHighlightedItems && <Text style={textStyles.hasHighlighted}>●</Text>}
    {hasCollectionItems && <Text style={textStyles.hasCollection}>■</Text>}
    <Text style={[textStyles.button, isActive ? textStyles.selected : null]}>{label}</Text>
  </TouchableOpacity>
)

function TagContainer({tag}) {
  return (
    <TouchableOpacity onPress={() => console.log('Pressed Search Tag')}>
      <View
        style={{
          height: 30,
          borderWidth: 1.5,
          borderColor: colors.seperatorLineColor,
          borderRadius: 8,
          justifyContent: 'center',
          marginBottom: 10,
          backgroundColor: '#000',
          marginHorizontal: 5,
        }}>
        <Text
          style={{
            color: 'white',
            marginHorizontal: 15,
            fontWeight: 'bold',
          }}>
          {tag}
        </Text>
      </View>
    </TouchableOpacity>
  );
}

Header = ({ children, myStyle, navigation, isBack, isUser }) => {
    return (
        <View style={{ ...styles.container, ...myStyle }}>
            {
                (navigation.canGoBack() && isBack) ?
                    <TouchableOpacity style={{
                        paddingRight: 40
                    }}
                        onPress={() => navigation.goBack()}>
                        <Ionicons name="ios-arrow-back" size={28} />
                    </TouchableOpacity>
                    : <View />
            }

            <Text style={{ ...styles.heading, paddingLeft: !(isBack && navigation.canGoBack()) ? 50 : 0, paddingRight: !isUser ? 50 : 0 }}>{children}</Text>

            {
                isUser ?

                    <TouchableOpacity style={{
                        paddingLeft: 40
                    }}
                        onPress={() => navigation.push("Profile")}
                    >
                        <FontAwesome5 name="user-circle" size={28} color="black" />
                    </TouchableOpacity>
                    : <View />
            }
        </View>
    )
}

render() {
    return (
      <>
        <MapView
          ref={map => {
            this.ref = map;
          }}
          onLayout={this.fitToMarkers}
          {...this.props}
        />
        <View style={styles.view}>
          <TouchableOpacity style={styles.button} onPress={this.fitToCenter}>
            <Ionicons name="md-locate" size={30} color="#000" />
          </TouchableOpacity>
        </View>
      </>
    );
  }

export default function CasesCard(props) {

	const activeTheme = useContext(theme).globalTheme;

	const styles = {
		container: {
			flexDirection: 'row',
			alignItems: 'center',
			width: '100%',
			marginVertical: 5,
			borderRadius: 5,
			elevation: 1
		},
		regionText: {
			color: activeTheme.textColor.normal,
			marginBottom: 5,
			fontSize: 16
		},
		caseTypeText: {
			fontWeight: 'bold',
			marginBottom: 8
		}
	}

	let provinceState = props.case.provinceState ? props.case.provinceState : "";
	let countryRegion = props.case.countryRegion ? props.case.countryRegion : "";

	let iconName;
	let color;

	switch (props.type) {
		case 'Confirmed':
			iconName = 'meho';
			color = activeTheme.textColor.confirmed
			break;
		case 'Recovered':
			iconName = 'smile-circle';
			color = activeTheme.textColor.recovered;
			break;
		case 'Deaths':
			iconName = 'frown';
			color = activeTheme.textColor.deaths;
			break;
	}

	return (
		<TouchableOpacity activeOpacity={0.8} onPress={props.onPress}>
			<View style={[styles.container, { backgroundColor: activeTheme.primaryColor, }]}>
				{/* icon change based on case type */}
				<Icon
					containerStyle={{ flex: 1 }}
					name={iconName}
					type="antdesign"
					color={color}
				/>
				<View style={{ flex: 5, padding: 10 }}>
					<Text style={styles.regionText}>{`${provinceState} ${countryRegion}`}</Text>
					{/* //text color changes based on case type */}
					<Text style={[styles.caseTypeText, { color }]}>{`${props.type} ${props.case[props.type.toLowerCase()]}`}</Text>
					<Text style={{ color: activeTheme.textColor.secondary }}>{`Last updated ${(new Date(props.case.lastUpdate)).toDateString()}`}</Text>
				</View>
			</View>
		</TouchableOpacity>

	)
}

render() {
		return (
			<>
				<View style={styles.topContainer}>
					<View style={styles.header}>
						<TouchableOpacity onPress={() => this.props.navigation.navigate('HomeScreen')}>
							<Ionicon style={{ color: 'white' }} size={30} name={'ios-arrow-back'} />
						</TouchableOpacity>
						<TouchableOpacity>
							<Ionicon style={{ color: "white" }} size={30} name={'ios-heart-empty'} />
						</TouchableOpacity>
					</View>
					<Image
						source={require('../../Assets/Images/signinScreenImage.png')}
						style={styles.image}
					>
					</Image>
				</View>
				<ScrollView>
					<View style={styles.titleBox}>
						<Text style={styles.title}>Paneer Butter Masala</Text>
						<RatingCard stars={4.5} />
					</View>
					<Text style={{ paddingHorizontal: 16, fontSize: 16, color: COLORS.text }}>IIT Jodhpur Canteen</Text>
					<View style={styles.bottomContainer}>
						<Text style={{ fontSize: 20 }}>About</Text>
						<Text style={{ fontSize: 16, color: COLORS.text }}>This is Some Cool Shit About Paneer Butter Masala. I love this Btw!</Text>
					</View>
					<View style={styles.bottomContainer}>
						<View style={styles.reviewHeader}>
							<Text style={{ fontSize: 20 }}>Review & Ratings</Text>
							<TouchableOpacity>
								<Entypo style={{ color: '#7300e6', marginLeft: 10 }} size={26} name={'circle-with-plus'} />
							</TouchableOpacity>
						</View>
					</View>
					<ReviewCard data={this.state.data} />
					<ReviewCard data={this.state.data} />
					<ReviewCard data={this.state.data} />
					<TouchableOpacity>
						<Text style={styles.more}>See all reviews</Text>
					</TouchableOpacity>
				</ScrollView>
			</>
		)
	}

export default function SummaryText(props) {

	const activeTheme = useContext(theme).globalTheme;

	const styles = {
		text: {
			color: activeTheme.textColor.normal,
			fontSize: 20,
			marginBottom: 5
		},
		subText: {
			fontWeight: 'bold'
		}
	}

	let subTextColor;

	switch (props.subText) {
		case 'Confirmed':
			subTextColor = activeTheme.textColor.confirmed;
			break;
		case 'Recovered':
			subTextColor = activeTheme.textColor.recovered;
			break;
		case 'Deaths':
			subTextColor = activeTheme.textColor.deaths;
			break;
		default:
			subTextColor = activeTheme.textColor.confirmed;
			break;
	}

	return (
		<View style={{ marginVertical: 10, marginHorizontal: 20, backgroundColor: activeTheme.backgroundColor, padding: 10, elevation: 1, borderRadius: 10 }}>
			<TouchableOpacity activeOpacity={0.8} onPress={props.onPress}>
				<AnimateNumber style={styles.text} value={props.text} formatter={(val) => {
					return parseFloat(val).toFixed(0)
				}}
				/>
				<Text style={[styles.subText, { color: subTextColor }]}>{props.subText}</Text>
			</TouchableOpacity>
		</View>

	)
}

function Section() {
  const navigation = useNavigation();
  const route = useRoute();
  const section = route.params.section;

  useEffect(() => {
    StatusBar.setBarStyle("light-content", true);

    return StatusBar.setBarStyle("dark-content", true);
  }, []);

  return (
    <>
      <ScrollContainer>
        <Container>
          <Cover>
            <Image source={section.image} />
            <PlayWrapper>
              <TouchableOpacity
                underlayColor="transparent"
                onPress={() => {
                  navigation.navigate("Video");
                }}
              >
                <PlayView>
                  <PlayIcon style={{ marginLeft: -10 }} />
                </PlayView>
              </TouchableOpacity>
            </PlayWrapper>
            <Wrapper>
              <Logo source={section.logo} />
              <Subtitle>{section.subtitle}</Subtitle>
            </Wrapper>
            <Title>{section.title}</Title>
            <Caption>{section.caption}</Caption>
          </Cover>
          <CloseView onPress={() => navigation.goBack()}>
            <Ionicons
              name="ios-close"
              size={36}
              color="#4775f2"
              style={{ marginTop: -2 }}
            />
          </CloseView>
          <Content>
            <Markdown
              body={section.content}
              pureCSS={htmlStyles}
              scalesPageToFit={false}
              scrollEnabled={false}
              onNavigationStateChange={(event) => {
                if (event.url != "about:blank") {
                  Linking.openURL(event.url);
                }
              }}
            />
          </Content>
        </Container>
      </ScrollContainer>
      <StatusBar hidden />
    </>
  );
}

render() {
    return (
      <View style={styles.viewContainer}>
        <Image
          source={bg}
          style={styles.backgroundImage}
          resizeMode="stretch"
        />
        <View style={styles.backBtn}>
          <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
            <Text style={[styles.backBtnText, Styles.fontLarge]}>x</Text>
          </TouchableOpacity>
        </View>
        <Image source={bird} resizeMode="contain" style={[styles.birdImage]} />
        <Animated.View style={styles.innerContainer}>
          <FlatList
            style={styles.boardListContainer}
            data={this.state.board}
            keyExtractor={(i, index) => index}
            renderItem={({item}) => {
              return (
                <View style={styles.flatListRow}>
                  <Text style={[styles.flatListText, Styles.fontSmall]}>
                    {item.name}
                  </Text>
                  <Text style={[styles.flatListText, Styles.fontSmall]}>
                    {item.score}
                  </Text>
                </View>
              );
            }}
            ItemSeparatorComponent={() => {
              return <View style={styles.flatListSeparator} />;
            }}
            ListEmptyComponent={() => {
              return (
                <Text style={[styles.flatListText, Styles.fontSmall]}>
                  Loading...
                </Text>
              );
            }}
            ListHeaderComponent={() => {
              return (
                <View
                  style={[
                    styles.flatListRow,
                    {
                      borderBottomColor: 'white',
                      borderBottomWidth: 1,
                    },
                  ]}>
                  <Text style={[styles.flatListText, Styles.fontSmall]}>
                    Name
                  </Text>
                  <Text style={[styles.flatListText, Styles.fontSmall]}>
                    Score
                  </Text>
                </View>
              );
            }}
          />
        </Animated.View>
      </View>
    );
  }

ResidentCard = ({
  resident, onSelectPerson
}) => {
  const {
    fname, lname, nickname, city, picture, communityname, objectId
  } = resident;
  const [pictureUrl, setPictureUrl] = useState();
  useEffect(() => {
    const pic = picture;
    if (pic) {
      setPictureUrl({ uri: pic.url });
    }
  }, []);

  return (
    <View>
      <TouchableOpacity
        style={layout.resCardContainer}
        onPress={() => {
          if (onSelectPerson) onSelectPerson(resident);
        }}
      >
        <View style={layout.resCardNameContainer}>
          <Title style={layout.resCardName}>{`${fname} ${lname}`}</Title>
          {objectId.includes('PatientID-') && (
            <View style={layout.resCardRedCircle} />
          )}
        </View>
        <Text style={layout.resCardNickname}>{`"${nickname}"`}</Text>
        <Image
          style={layout.resCardProfPic}
          source={pictureUrl}
        />
        <View style={layout.resCardCityLicenseContainer}>
          <View style={layout.resCardCityContainer}>
            <Text style={layout.resCardFont}>{I18n.t('findResident.residentCard.city')}</Text>
            <Text style={layout.resCardFont}>{city}</Text>
          </View>
          <View style={layout.resCardLicenseContainer}>
            <Text style={layout.resCardFont}>{I18n.t('findResident.residentCard.community')}</Text>
            <Text style={layout.resCardLicense}>{communityname}</Text>
          </View>
        </View>
      </TouchableOpacity>
    </View>
  );
}

Camera = () => {
  const { t } = useTranslation()
  const [hasPermission, setHasPermission] = React.useState(null)
  const [photo, setPhoto] = React.useState(null)
  const camera = React.createRef()

  const takePicture = async () => {
    try {
      const photo = await camera.current.takePictureAsync()
      setPhoto(photo)
    } catch (err) {
      console.log('Error while taking picture', err)
    }
  }

  const redirectImage = async () => {
    const isAvailable = await Sharing.isAvailableAsync()

    if (!isAvailable) {
      alert(t('camera:sharingNotAvailable'))
    }

    await Sharing.shareAsync(photo.uri)
    setPhoto(null)
  }

  React.useEffect(() => {
    ;(async () => {
      const { status } = await ExpoCamera.requestPermissionsAsync()
      setHasPermission(status === 'granted')
    })()
  }, [])

  if (hasPermission === null) {
    return <View />
  }

  if (hasPermission === false) {
    return (
      <Container>
        <Text>{t('camera:permissionDenied')}</Text>
      </Container>
    )
  }

  return !photo ? (
    <Wrapper>
      <ExpoCamera style={{ flex: 1 }} ref={camera}>
        <TakePictureButton onPress={takePicture}>
          <Icon name="camera-alt" color="#fff" />
        </TakePictureButton>
      </ExpoCamera>
    </Wrapper>
  ) : (
    <Wrapper>
      <Display>
        <ImageContainer source={{ uri: photo.uri }} />
        <PhotoButtons>
          <TouchableOpacity onPress={() => setPhoto(null)}>
            <PhotoActionButton>{t('camera:photoRetake')}</PhotoActionButton>
          </TouchableOpacity>
          <TouchableOpacity onPress={redirectImage}>
            <PhotoActionButton>{t('camera:photoForward')}</PhotoActionButton>
          </TouchableOpacity>
        </PhotoButtons>
      </Display>
    </Wrapper>
  )
}

CometChatSenderVideoMessageBubble = (props) => {
  const player = createRef();
  
  useEffect(() => {
       if (props.message) {
        setMessage({ ...props.message, messageFrom: enums.MESSAGE_FROM_SENDER });
       }
      }, [props.message]);
      const [message, setMessage] = useState({
       ...props.message,
       messageFrom: enums.MESSAGE_FROM_SENDER,
      });

  return (
    <View style={style.container}>
      <View style={style.messageWrapperStyle}>
        <TouchableOpacity
          style={{
            ...style.messageVideoWrapperStyle,
          }}
          onPress={() => {
            props.actionGenerated(actions.VIEW_ACTUAL_VIDEO, message);
          }}
          onLongPress={() =>
            props.actionGenerated(actions.OPEN_MESSAGE_ACTIONS, message)
          }>
          <VideoPlayer
            source={{
              uri: message.data.url,
            }} // Can be a URL or a local file.
            ref={player} // Store reference
            style={style.messageVideo}
            navigator={props.navigator}
            disableBack
            disableFullscreen
            disableVolume
            muted
            resizeMode="contain"
          />
        </TouchableOpacity>
      </View>
      <View style={style.messageInfoWrapperStyle}>
        <CometChatThreadedMessageReplyCount {...props} message={message} />
        <CometChatReadReceipt {...props} message={message} />
      </View>
      <CometChatMessageReactions
        theme={props.theme}
        {...props}
        message={message}
        showMessage={props?.showMessage}
      />
    </View>
  );
}

CometChatReceiverVideoMessageBubble = (props) => {
  const message = {
    ...props.message,
    messageFrom: enums.MESSAGE_FROM_RECEIVER,
  };
  const viewTheme = { ...theme, ...props.theme };
  const player = createRef();
  let senderAvatar = null;
  if (message.receiverType === CometChat.RECEIVER_TYPE.GROUP) {
    senderAvatar = { uri: message.sender.avatar };
  }
  return (
    <View style={style.container}>
      <View style={style.innerContainer}>
        {props.message.receiverType === CometChat.RECEIVER_TYPE.GROUP ? (
          <View style={style.avatarStyle}>
            <CometChatAvatar
              cornerRadius={18}
              borderColor={viewTheme.color.secondary}
              borderWidth={0}
              image={senderAvatar}
              name={message.sender.name}
            />
          </View>
        ) : null}
        <View>
          {props.message.receiverType === CometChat.RECEIVER_TYPE.GROUP ? (
            <View style={style.senderNameContainer}>
              <Text style={{ color: viewTheme.color.helpText }}>
                {message.sender.name}
              </Text>
            </View>
          ) : null}
          <View style={style.messageWrapperStyle}>
            <TouchableOpacity
              style={style.messageVideoWrapperStyle}
              onPress={() => {
                props.actionGenerated(actions.VIEW_ACTUAL_VIDEO, message);
              }}
              onLongPress={() =>
                props.actionGenerated(actions.OPEN_MESSAGE_ACTIONS, message)
              }>
              <VideoPlayer
                source={{
                  uri: message.data.url,
                }} // Can be a URL or a local file.
                ref={player} // Store reference
                style={style.messageVideo}
                navigator={props.navigator}
                disableBack
                disableFullscreen
                disableVolume
                muted
                resizeMode="contain"
              />
            </TouchableOpacity>
          </View>

          <View style={style.containerStyle}>
            <View style={style.messageInfoWrapperStyle}>
              <CometChatReadReceipt {...props} message={message} />
              <CometChatThreadedMessageReplyCount
                {...props}
                message={message}
              />
              <CometChatMessageReactions
                theme={props.theme}
                {...props}
                message={message}
                showMessage={props?.showMessage}
              />
            </View>
          </View>
        </View>
      </View>
    </View>
  );
}

render() {
    let messages = [...this.props.messages];
    if (messages.length) {
      messages = messages.reverse();
    }

    let newMsgPopUp = (
      <View style={styles.newMessagePopupContainer}>
        <TouchableOpacity
          onPress={() => {
            this.setState({ showNewMsg: null }, () => {
              this.flatListRef.current.scrollToOffset({
                offset: 0,
                animated: true,
              });
            });
          }}
          style={styles.newMessageTextContainer}>
          <Text>New message</Text>
          <Icon
            name="arrow-down"
            style={{ marginLeft: 5 }}
            size={15}
            color="#000"
          />
        </TouchableOpacity>
      </View>
    );

    return (
      <>
        <FlatList
          ref={this.flatListRef}
          ListEmptyComponent={this.listEmptyComponent}
          onScroll={(event) => {
            this.yOffset = event.nativeEvent.contentOffset.y;
            if (this.yOffset > 50 && this.state.showNewMsg) {
              this.setState({ showNewMsg: false });
            }
          }}
          scrollEventThrottle={16}
          onEndReached={() => this.getMessages(true)}
          onEndReachedThreshold={0.3}
          inverted={-1}
          style={{ flex: 1, paddingHorizontal: 5 }}
          contentContainerStyle={!messages.length ? { flex: 1 } : {}}
          ListFooterComponent={
            messages.length && this.props.parentMessageComponent
              ? this.props.parentMessageComponent
              : null
          }
          data={messages}
          keyExtractor={(item, index) => item.messageId + '_' + index}
          renderItem={this.renderItem}
        />
        {this.state.showNewMsg ? newMsgPopUp : null}
      </>
    );
  }

function Settings() {
  const { state, toggle_darkmode } = useContext(Context);
  const { colors } = useTheme();

  return (
    <View style={styles.container}>
      <View style={styles.TitleContainer}>
        <Text style={[styles.text, { fontSize: 45, color: colors.text }]}>
          Settings
        </Text>
      </View>
      <View
        style={{
          marginHorizontal: 20,
        }}
      >
        <View
          style={{
            flexDirection: "row",
            justifyContent: "space-between",
            marginVertical: 15,
          }}
        >
          <Text style={[styles.text, { color: colors.text }]}>Theme</Text>
          <TouchableOpacity onPress={toggle_darkmode}>
            <Feather
              name={state.Theme ? "moon" : "sun"}
              size={40}
              color={colors.text}
            />
          </TouchableOpacity>
        </View>
      </View>
      <View style={styles.TitleContainer}>
        <Text style={[styles.text, { fontSize: 45, color: colors.text }]}>
          About
        </Text>
      </View>
      <Text
        style={[
          styles.text,
          { color: colors.text, fontSize: 16, marginHorizontal: 20 },
        ]}
      >
        Its a simple open source app created with react-native and expo
      </Text>
    </View>
  );
}

export default function profileNavigator() {
  const Stack = createStackNavigator();

  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Profile"
        component={profileScreen}
        options={{
          headerTitle: (
            <TouchableOpacity
              style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
              <Text style={{color: 'white', fontWeight: 'bold', fontSize: 16}}>
                johndoe
              </Text>
            </TouchableOpacity>
          ),
          headerTitleStyle: {alignSelf: 'center'},
          headerStyle: {
            backgroundColor: colors.bottomBackGround,
            shadowColor: colors.seperatorLineColor,
          },
          headerRight: () => (
            <TouchableOpacity>
              <View
                style={{
                  flex: 1,
                  justifyContent: 'center',
                  alignItems: 'center',
                  marginRight: 10,
                }}>
                <Image
                  source={images.list3}
                  style={{resizeMode: 'contain', width: 25, height: 25}}
                />
              </View>
            </TouchableOpacity>
          ),
          headerLeft: () => (
            <TouchableOpacity>
              <View
                style={{
                  flex: 1,
                  justifyContent: 'center',
                  alignItems: 'center',
                  marginStart: 10,
                }}>
                <Image
                  source={images.addIcon}
                  style={{resizeMode: 'contain', width: 20, height: 20}}
                />
              </View>
            </TouchableOpacity>
          ),
        }}
      />
    </Stack.Navigator>
  );
}

export default function ConstantStories() {
  return (
    <ScrollView horizontal={true}>
      <View
        style={{
          flexDirection: 'column',
          justifyContent: 'center',
          marginStart: 10,
          marginEnd: 10,
          marginTop: 10,
          marginBottom: 5,
          alignItems: 'center',
        }}>
        <TouchableOpacity>
          <View
            style={{
              backgroundColor: colors.bottomBackGround,
              width: 64,
              height: 64,
              borderRadius: 100,
              alignItems: 'center',
              justifyContent: 'center',
              borderWidth: 1,
              borderColor: '#262626',
            }}>
            <Image
              source={images.addIcon}
              style={{width: 20, height: 20, borderRadius: 100}}
            />
          </View>
        </TouchableOpacity>
        <Text
          style={{
            color: 'white',
            fontSize: 12,
            marginTop: 5,
          }}>
          New
        </Text>
      </View>
      <StoryListItem name="Holiday" />
    </ScrollView>
  );
}

export default function MessageListItem({data}) {
  return (
    <TouchableOpacity>
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          marginStart: 10,
          marginEnd: 10,
          marginTop: 15,
        }}>
        <View style={{flexDirection: 'row'}}>
          <Image
            source={{uri: 'https://picsum.photos/600'}}
            style={{width: 60, height: 60, borderRadius: 70}}
          />
          <View style={{flexDirection: 'column', marginStart: 15}}>
            <Text style={{color: 'white', fontWeight: 'bold'}}>
              {data.name}
            </Text>
            <View style={{flexDirection: 'row', alignItems: 'center'}}>
              <Text style={{color: colors.textFaded2}}>{data.message}</Text>
              <Image
                source={images.dot}
                style={{width: 3, height: 3, marginStart: 5}}
              />
              <Text style={{color: colors.textFaded2, marginStart: 5}}>2h</Text>
            </View>
          </View>
        </View>

        <TouchableOpacity>
          <View>
            <Image
              source={images.photo_camera}
              style={{width: 25, height: 25}}
            />
          </View>
        </TouchableOpacity>
      </View>
    </TouchableOpacity>
  );
}

SongSearch = ({navigation}) => {
	const [result, setResult] = useState([]);
	const [searchQuery, setSearchQuery] = useState('');
	const [selectedSong, setSelectedSong] = useState({});
	const [disable, setDisable] = useState(false);
	const {queue, updateQueue,selectedTrack,play} = useContext(GlobalContext);
	const [filler,setFiller] = useState(true);

	const renderer = ({item}) => (
		<TouchableOpacity
			activeOpacity={0.75}
			onPress={() => {
				setSelectedSong(item);
				if (disable) {
				} else {
					const trackDetails = queue;
					trackDetails[selectedTrack] = {
							title: item.track_name,
							artist: item.artist_name,
							artwork: item.album_image,
							url: item.track_url,
							id: item.ref_id,
						};
						updateQueue(trackDetails);
						const persistingData = async () => {
							await AsyncStorage.setItem(
								'queue',
								JSON.stringify(trackDetails),
						);
					};
					persistingData();

					navigation.navigate("PlayerScreen");
				}	
			}}>
			<ListItem
				toggleDisability={setDisable}
				navigation={navigation}
				selectedSong={selectedSong}
				data={item}
				navig={navigation}
			/>
		</TouchableOpacity>
	);

	const search = _.debounce((value) => {
		console.log(value, 'value');
		if (value.length === 0) {
			setResult([]);
			setFiller(true);
		}
		if (value.length !== 0) {
			setFiller(false);
			axios
				.post(
					`${apiUrl}search/tracks`,
					{
						query: value,
					},
					{
						headers: {
							'Content-Type': 'application/json',
						},
					},
				)
				.then((res) => {
					setResult(res.data);
				})
				.catch((err) => {
					console.log(err);
				});
		}
	}, 500);

	return (
		<LinearGradientComp
			bgcolors={{
				colorOne: "rgb(15, 15, 15)",
				colorTwo: "rgb(15, 15, 15)",
			}}> 
			
				<SearchBox
					placeholder="Search Songs"
					searchQuery={searchQuery}
					setSearchQuery={search}
					navigation={navigation}
				/>
			{
				result.length === 0 && !filler ? (		
					<FillerContent text={"No Search Results"} />
				):(
					filler ? (
						<>
							<FillerContent text={"Nothing Searched"} />
						</>
					):(
						<>
							<FlatList
								keyExtractor={(item) => item.ref_id}
								data={result}
								renderItem={renderer}
								showsVerticalScrollIndicator={false}
							/>
						</>
					)
				)
			}
		</LinearGradientComp>
	);
}

MyStatusView = ({navigation, statusData, isUser, isBorder}) => {
  const statusImage =
    statusData && statusData.status && statusData.status.length > 0
      ? statusData.status[statusData.status.length - 1].image + ''
      : '';
  // console.log('Status Item : ', statusData);

  return (
    <TouchableOpacity
      onPress={() => {
        statusImage && statusImage != ''
          ? navigation.navigate(NAV_TYPES.STATUS_VIEW, {
              statusData: JSON.stringify(statusData),
              isUser: isUser,
            })
          : navigation.navigate(NAV_TYPES.CAMERA_VIEW, {});
      }}>
      <Card transparent style={{elevation: 0, marginRight: -5}}>
        <CardItem>
          <View style={{marginLeft: -5}}>
            <View
              style={
                isBorder
                  ? styles.circleView
                  : isUser
                  ? styles.circleNoView
                  : styles.circleSeenView
              }>
              <Thumbnail
                style={
                  isBorder
                    ? {width: 50, height: 50}
                    : isUser
                    ? {width: 60, height: 60, borderRadius: 100}
                    : {width: 50, height: 50}
                }
                source={statusImage ? {uri: statusImage} : PROFILE2}
              />
            </View>
            {isUser && (!statusImage || statusImage === '') && (
              <Icon
                type="MaterialCommunityIcons"
                name="plus-circle"
                color={GREEN}
                style={{
                  color: LIGHT_GREEN,
                  position: 'absolute',
                  bottom: -5,
                  right: -18,
                }}
              />
            )}
          </View>
          <Body
            style={{
              flexDirection: 'column',
              width: 800,
              marginLeft: 15,
            }}>
            <Text
              numberOfLines={1}
              style={[DEFAULT_STYLES.poppinsSemiBold, styles.userName]}>
              {isUser ? 'My Status' : statusData.userName}
            </Text>
            <TimeElapsed
              style={[DEFAULT_STYLES.poppinsLight, styles.userMessage]}
              time={
                statusData.lastStatusTime
                  ? statusData.lastStatusTime
                  : 'Tap to add status update'
              }
              // interval={1000}
              isValid={statusData != ''}
            />
            {/* <Text
              numberOfLines={2}
              style={[DEFAULT_STYLES.poppinsLight, styles.userMessage]}>
              {statusData.lastStatusTime
                ? getDateTimeStatusFormat(statusData.lastStatusTime)
                : 'Tap to add status update'}
            </Text> */}
          </Body>
          <View>
            {isUser && (
              <Icon
                style={styles.msgIcon}
                name="dots-horizontal"
                type="MaterialCommunityIcons"
              />
            )}
          </View>
        </CardItem>
      </Card>
    </TouchableOpacity>
  );
}

ListItem = ({navig, data, selectedSong, toggleDisability}) => {
	const [modalVisible, setModalVisible] = useState(false);

	const handlePress = () => {
		// return <Overlay open={true} />;
		setModalVisible(true);
	};

	useEffect(() => {
		if (modalVisible) {
			toggleDisability(true);
		} else {
			toggleDisability(false);
		}
	}, [modalVisible]);

	return (
		<View style={{flexDirection: 'row', width: '100%'}}>
			<View style={styles.centeredView}>
				<Overlay
					navig={navig}
					data={data}
					selectedSong={selectedSong}
					toggleVisibility={setModalVisible}
					modalVisible={modalVisible}
				/>
			</View>

			<View
				style={{
					width: width / 7,
					height: width / 7,
					borderRadius: 1,
					marginVertical: 7,
					marginHorizontal: 10,
					justifyContent: 'center',
					alignItems: 'center',
				}}>
				<Image
					source={{
						uri: data.album_image,
					}}
					style={{
						width: 50,
						height: 50,
						borderRadius: 6,
						overflow: 'hidden',
					}}
				/>
			</View>

			<View
				style={{
					marginVertical: 10,
					marginHorizontal: 15,
					justifyContent: 'space-around',
					flex: 1,
				}}>
				<View
					style={{
						flexDirection: 'row',
						marginTop: 2,
						justifyContent: 'space-between',
						flex: 1,
						width: '100%',
					}}>
					<Type
						style={{
							fontSize: width / 24,
							width: '80%',
							color: colors.text,
							fontWeight: 'bold',
						}}>
						{data.track_name.length > 30
							? `${data.track_name.substring(0, 26)}....`
							: data.track_name}
					</Type>

					<TouchableOpacity onPress={handlePress}>
						<Icon
							name="ellipsis-vertical-outline"
							hitSlop={{top: 20, bottom: 20, left: 20, right: 20}}
							size={22}
							style={{
								left: 5,
								color: 'white',
							}}
						/>
					</TouchableOpacity>
				</View>

				<Type
					style={{
						fontSize: width / 26,
						color: '#D3D3D3',
						fontFamily:"NotoSans-Regular"
					}}>
					{data.artist_name}
				</Type>
			</View>
		</View>
	);
}

InputBox = (props) => {
  const [isFocused, setIsFocused] = useState(false);
  const [value, setValue] = useState('');

  const inputRef = useRef();

  const handleFocus = () => {
    setIsFocused(true);
    if (props.onFocus) props.onFocus();
  };

  const handleBlur = () => {
    setIsFocused(false);
    if (props.onBlur) props.onBlur();
  };

  const handleType = (text) => {
    setValue(text);
    if (props.onChangeText) props.onChangeText(text);
  };

  const handleIconPress = () => {
		console.log('lol');
		if (value.length > 0) {
			setValue('');
		}
	};

  return (
    <View style={{marginVertical: 10, marginVertical: 15, ...props.viewStyle}}>
      <TextInput
        {...props}
        style={{
          backgroundColor:"white",
          borderColor:"white",
          borderRadius: 8,
          height: 45,
          color:"white",
		      opacity:1,
          ...props.style,
        }}
        placeholderTextColor={props.searchbox ? "black" : "white"}
        ref={inputRef}
        onFocus={handleFocus}
        onBlur={handleBlur}
        blurOnSubmit={true}
        value={value}
        onChangeText={(text) => handleType(text)}
      />

		{props.icon ? (
			<TouchableOpacity style={{
        justifyContent:"center",
        alignItems:"center",
      }}onPress={handleIconPress}>
        <Icon
            size={30}
            name="close-circle-outline"
            style={[
              {
                marginTop:"20%",
                color: "black",
              },
            ]}
        />
			</TouchableOpacity>
			) : (
        <>
        </>
		)}

      <Text
        style={{
          position: 'absolute',
          left:8,
          top: !isFocused && value === '' ? 13 : -20,
          color: !isFocused && value === '' ? "white" : GRAY.T5,
        }}
        onPress={() => {
          inputRef.current.focus();
        }}>
        {props.label ? props.label : null}
      </Text>
    </View>
  );
}