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>
    </>
  );
}

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>
  );
}

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>
    )
}

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;
`

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>
)

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 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>
  );
}

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 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>
  );
}

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>
  );
}

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}
      </>
    );
  }

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>
  );
}

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>
  );
}

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>

	)
}

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 />
    </>
  );
}

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>
  )
}

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>
			</>
		)
	}

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>
    );
  }

export default function AppNavigator() {
  const [validate, setValidate] = React.useState(false); //giriş yapılınca geri geri gelmeyi deaktif etmek için kullandık
  function LoginScreen() {
    const _signInAsync = async () => {
      setValidate(true);
    };
    return (
      <View style={Styles.container}>
        <View style={Styles.logoContainer}>
          <Image source={images.logo} style={{height: 70, width: 200}} />
        </View>
        <View style={Styles.userNameContainer}>
          <TextInput
            style={Styles.userNameInput}
            placeholder="Phone number, username or email"
            placeholderTextColor={colors.textFaded2}
          />
        </View>
        <View style={Styles.passwordContainer}>
          <TextInput
            secureTextEntry={true}
            style={Styles.passwordInput}
            placeholder="Password"
            placeholderTextColor={colors.textFaded2}
          />
        </View>
        <View style={Styles.forgotPasswordContainer}>
          <TouchableOpacity>
            <Text style={Styles.forgotPasswordText}>Forgot password?</Text>
          </TouchableOpacity>
        </View>
        <TouchableOpacity style={Styles.loginContainer} onPress={_signInAsync}>
          <Text style={Styles.loginText}>Log In</Text>
        </TouchableOpacity>
        <View
          style={{
            //flex: 0.1,
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            marginTop: 30,
          }}>
          <View style={{flex: 1, height: 1, backgroundColor: '#262626'}}></View>
          <Text style={{marginLeft: 40, marginRight: 40, color: '#969696'}}>
            OR
          </Text>
          <View
            style={{
              flex: 1,
              height: 1,
              backgroundColor: '#262626',
            }}></View>
        </View>
        <View
          style={{
            marginTop: 40,
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          <Image source={images.facebookLogo} style={{width: 20, height: 20}} />
          <TouchableOpacity style={{alignItems: 'center', marginStart: 10}}>
            <Text style={{color: '#008bef'}}>Log In With Facebook</Text>
          </TouchableOpacity>
        </View>
        <View style={{flexDirection: 'row', marginTop: 50}}>
          <View
            style={{
              flex: 1,
              backgroundColor: '#262626',
              height: 1,
            }}></View>
        </View>
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'center',
            marginTop: 20,
          }}>
          <Text style={{color: '#969696'}}>Don't have an account ?</Text>
          <TouchableOpacity>
            <Text style={{color: '#008bef'}}> Sign Up.</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
  const Stack = createStackNavigator();
  return validate ? (
    <MainNavigator />
  ) : (
    <Stack.Navigator>
      <Stack.Screen
        name="Login"
        component={LoginScreen}
        options={{
          headerStyle: {backgroundColor: '#000'},
          headerTintColor: '#fff',
          headerTransparent: true,
          title: '',
        }}
      />
    </Stack.Navigator>
  );
}

export default function MainNavigator({navigation}) {
  const Stack = createStackNavigator();
  const NavigateToStoryCamera = () => navigation.navigate('StoryCamera');
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="MainScreen"
        component={TabNavigator}
        options={{title: '', headerShown: false}}
        NavigateToStoryCamera={NavigateToStoryCamera}
      />
      <Stack.Screen
        name="StoryCameraScreen"
        component={StoryCamera}
        options={{
          title: '',
          gestureDirection: 'horizontal-inverted',
          headerBackTitleVisible: false,
          headerTransparent: true,

          headerLeft: () => (
            <View
              style={{flexDirection: 'row', flex: 1, justifyContent: 'center'}}>
              {/*<TouchableOpacity>
                <Image
                  style={{
                    marginStart: 20,
                    width: 30,
                    height: 30,
                  }}
                  source={images.settings}
                />
              </TouchableOpacity>
              <Image
                style={{
                  marginStart: 130,
                  width: 30,
                  height: 30,
                }}
                source={images.flash}
              />*/}
            </View>
          ),
          /*
          headerRight: () => (
            <View style={{flexDirection: 'row', flex: 1}}>
              <Image
                style={{
                  marginEnd: 20,
                  width: 30,
                  height: 30,
                }}
                source={images.close}
              />
            </View>
          ),*/
        }}
      />
      <Stack.Screen
        name="DirectMessageScreen"
        component={DirectMessageScreen}
        options={({navigation}) => ({
          //headerTransparent: true,
          headerTitle: () => (
            <View>
              <Text style={{color: 'white', fontWeight: 'bold', fontSize: 16}}>
                johndoe
              </Text>
            </View>
          ),
          headerBackTitleVisible: false,
          headerStyle: {
            backgroundColor: colors.bottomBackGround,
            shadowColor: colors.seperatorLineColor,
          },
          headerLeft: () => (
            <TouchableOpacity onPress={() => navigation.navigate('MainScreen')}>
              <Image
                source={images.dmBackButton}
                style={{width: 20, height: 20, marginStart: 10}}
              />
            </TouchableOpacity>
          ),
          headerRight: () => (
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <TouchableOpacity
                onPress={() => console.log('Pressed Write in DM')}
                style={{flexDirection: 'row'}}>
                <Image
                  source={images.write}
                  style={{width: 25, height: 25, marginEnd: 20}}
                />
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => console.log('Pressed Video Camera in DM')}
                style={{flexDirection: 'row'}}>
                <Image
                  source={images.videoCamera}
                  style={{width: 30, height: 30, marginEnd: 10}}
                />
              </TouchableOpacity>
            </View>
          ),
        })}
      />
      <Stack.Screen
        name="StoryScreen"
        component={StoryScreen}
        navigation={navigation}
        options={{
          headerStyle: {backgroundColor: 'black', shadowColor: 'black'},
          title: '',
          headerLeft: () => <View></View>,
        }}
      />
    </Stack.Navigator>
  );
}

function Feed(props) {
    const [posts, setPosts] = useState([]);
    const [refreshing, setRefreshing] = useState(false)
    const [unmutted, setUnmutted] = useState(null)
    const [inViewPort, setInViewPort] = useState(0)
    const [sheetRef, setSheetRef] = useState(useRef(null))
    const [modalShow, setModalShow] = useState({ visible: false, item: null })
    const [isValid, setIsValid] = useState(true);

    useEffect(() => {
        if (props.usersFollowingLoaded == props.following.length && props.following.length !== 0) {
            props.feed.sort(function (x, y) {
                return y.creation.toDate() - x.creation.toDate();
            })

            setPosts(props.feed);
            setRefreshing(false)
            for (let i = 0; i < props.feed.length; i++) {
                if (props.feed[i].type == 0) {
                    setUnmutted(i)
                    return;
                }
            }
        }
        props.navigation.setParams({ param: "value" })

    }, [props.usersFollowingLoaded, props.feed])

    const onViewableItemsChanged = useRef(({ viewableItems, changed }) => {
        if (changed && changed.length > 0) {
            setInViewPort(changed[0].index);
        }
    })




    if (posts.length == 0) {
        return (<View />)
    }

    if (sheetRef.current !== null) {
        if (modalShow.visible) {
            sheetRef.snapTo(0)
        } else {
            sheetRef.snapTo(1)
        }
    }
    return (
        <View style={[container.container, utils.backgroundWhite]}>

            <FlatList
                refreshControl={
                    <RefreshControl
                        refreshing={refreshing}
                        onRefresh={() => {
                            setRefreshing(true);
                            props.reload()
                        }}
                    />
                }
                onViewableItemsChanged={onViewableItemsChanged.current}
                viewabilityConfig={{
                    waitForInteraction: false,
                    viewAreaCoveragePercentThreshold: 70
                }}
                numColumns={1}
                horizontal={false}
                data={posts}
                keyExtractor={(item, index) => index.toString()}

                renderItem={({ item, index }) => (
                    <View key={index}>
                        <Post route={{ params: { user: item.user, item, index, unmutted, inViewPort, setUnmuttedMain: setUnmutted, setModalShow, feed: true } }} navigation={props.navigation} />
                    </View>
                )}
            />

            <BottomSheet
                bottomSheerColor="#FFFFFF"
                ref={setSheetRef}
                initialPosition={0} //200, 300
                snapPoints={[300, 0]}
                isBackDrop={true}
                isBackDropDismissByPress={true}
                isRoundBorderWithTipHeader={true}
                backDropColor="black"
                isModal
                containerStyle={{ backgroundColor: "white" }}
                tipStyle={{ backgroundColor: "white" }}
                headerStyle={{ backgroundColor: "white", flex: 1 }}
                bodyStyle={{ backgroundColor: "white", flex: 1, borderRadius: 20 }}
                body={

                    <View>

                        {modalShow.item != null ?
                            <View>
                                <TouchableOpacity style={{ padding: 20 }}
                                    onPress={() => {
                                        props.navigation.navigate("ProfileOther", { uid: modalShow.item.user.uid, username: undefined });
                                        setModalShow({ visible: false, item: null });
                                    }}>
                                    <Text >Profile</Text>
                                </TouchableOpacity>
                                <Divider />
                                {modalShow.item.creator == firebase.auth().currentUser.uid ?
                                    <TouchableOpacity style={{ padding: 20 }}
                                        onPress={() => {
                                            props.deletePost(modalShow.item).then(() => {
                                                setRefreshing(true);
                                                props.reload()
                                            })
                                            setModalShow({ visible: false, item: null });
                                        }}>
                                        <Text >Delete</Text>
                                    </TouchableOpacity>
                                    : null}

                                <Divider />
                                <TouchableOpacity style={{ padding: 20 }} onPress={() => setModalShow({ visible: false, item: null })}>
                                    <Text >Cancel</Text>
                                </TouchableOpacity>
                            </View>
                            : null}

                    </View>
                }
            />
            <Snackbar
                visible={isValid.boolSnack}
                duration={2000}
                onDismiss={() => { setIsValid({ boolSnack: false }) }}>
                {isValid.message}
            </Snackbar>
        </View>

    )
}

export default function News(props) {

	const [news, setNews] = useState([]);

	const [forceListRender, setForceListRender] = useState(false);

	const currentLocation = useContext(location).locationContext;

	const activeTheme = useContext(theme).globalTheme;

	const WINDOW_WIDTH = Dimensions.get('window').width;

	useEffect(() => {
		fetchNews();
	}, []);

	useEffect(() => {
		console.log("News updated", news);
		setForceListRender(!forceListRender);
	}, [news]);

	async function fetchNews() {
		let response = await fetch('https://newsapi.org/v2/top-headlines?q=COVID&sortBy=publishedAt&apiKey=fc45533b832c4702b9a43713d12dc410&country=' + currentLocation.countryCode.toLowerCase());

		if (response.status === 200) {
			let result = await response.json();

			setNews(result.articles);
		}
	}

	const styles = {
		overlay: {
			position: 'absolute',
			top: 0,
			right: 0,
			backgroundColor: '#00000029',
			width: '100%',
			height: '100%',
			borderRadius: 10
		},
		featuredTextContainer: {
			justifyContent: 'center',
			padding: 10,
			backgroundColor: '#00000090',
			borderBottomRightRadius: 10,
			borderBottomLeftRadius: 10
		},
		title: {
			fontSize: 17,
			fontWeight: 'bold',
			color: activeTheme.textColor.normal
		},
		description: {
			fontSize: 14,
			color: activeTheme.textColor.normal
		},
		featuredFooter: {
			flexDirection: 'row',
			justifyContent: 'space-between',
			marginTop: 15
		},
		source: {
			fontSize: 11,
			color: activeTheme.textColor.normal
		},
		date: {
			fontSize: 11,
			color: activeTheme.textColor.normal
		},
		itemContainer: {
			flexDirection: 'row',
			alignItems: 'center',
			justifyContent: 'center',
			height: 130,
			width: WINDOW_WIDTH - 40
		},
		itemTextContainer: {
			justifyContent: 'center',
			flex: 2,
			marginRight: 10
		},
		itemFooter: {
			flexDirection: 'row',
			alignItems: 'center',
			justifyContent: 'space-between'
		},
		imageContainer: {
			justifyContent: 'center',
			alignItems: 'center',
			flex: 1
		},
		featuredText: {
			color: 'white'
		}
	}

	function renderItem({ item, index }) {
		let imageUrl = "";
		if (item.urlToImage) {
			imageUrl = item.urlToImage
		} else {
			imageUrl = "http://www.traumasoft.com/wp-content/uploads/2018/09/main-news-and-events-banner.jpg"
		}
		console.log("SOURCE", item.urlToImage);
		if (index === 0) {
			return (
				<TouchableOpacity activeOpacity={0.8} onPress={() => { props.navigation.navigate("NewsDetails", { news: item }) }}>
					<ImageBackground source={{ uri: imageUrl }} style={{ justifyContent: 'flex-end', height: 300, width: WINDOW_WIDTH - 40, marginVertical: 10 }} imageStyle={{ borderRadius: 10 }}>
						<View style={styles.overlay} />
						<View style={styles.featuredTextContainer}>
							<Text style={[styles.title, styles.featuredText]}>{item.title}</Text>
							<Text style={[styles.description, styles.featuredText]} numberOfLines={2}>{item.description}</Text>
							<View style={styles.featuredFooter}>
								<Text style={[styles.source, styles.featuredText]}>{item.source.name}</Text>
								<Text style={[styles.date, styles.featuredText]}>{(new Date(item.publishedAt)).toDateString()}</Text>
							</View>
						</View>
					</ImageBackground>
				</TouchableOpacity>
			)
		} else {
			return (
				<TouchableOpacity activeOpacity={0.8} onPress={() => { props.navigation.navigate("NewsDetails", { news: item }) }}>
					<View style={styles.itemContainer}>
						<View style={styles.itemTextContainer}>
							<Text style={styles.title}>{item.title}</Text>
							<View style={styles.itemFooter}>
								<Text style={styles.source}>{item.source.name}</Text>
								<Text style={styles.date}>{(new Date(item.publishedAt)).toDateString()}</Text>
							</View>
						</View>
						<View style={styles.imageContainer}>
							<Image source={{ uri: imageUrl }} style={{ height: 100, width: 100, borderRadius: 10 }} />
						</View>
					</View>
				</TouchableOpacity>
			)
		}

	}
	return (
		<Container>
			<View style={{ paddingBottom: 100 }}>
				<FlatList
					data={news}
					extraData={forceListRender}
					renderItem={renderItem}
					contentContainerStyle={{ alignItems: 'center', }}
				/>
			</View>
		</Container>
	)
}