react-native#TouchableOpacity JavaScript Examples

export default function StoryListItem({item, storyOnPress, name}) {
  return (
    <View style={Styles.container}>
      <TouchableOpacity onPress={storyOnPress}>
        <LinearGradient
          colors={['#CA1D7E', '#E35157', '#F2703F']}
          start={{x: 0.0, y: 1.0}}
          end={{x: 1.0, y: 1.0}}
          style={{borderRadius: 100, padding: 2}}>
          <View style={{borderWidth: 2, borderRadius: 100}}>
            <Image
              source={{uri: 'https://picsum.photos/200'}}
              style={{width: 55, height: 55, borderRadius: 70}}
            />
          </View>
        </LinearGradient>
      </TouchableOpacity>
      <View>
        <Text style={Styles.storyText}>{name}</Text>
      </View>
    </View>
  );
}

function ButtonIconText(props) {
  const {
    disabled,
    source,
    text,
    onPress,
    styleBtn,
    styleText,
    styleIcon,
    ...otherProps
  } = props;
  return (
    <TouchableOpacity
      onPress={onPress}
      disabled={disabled}
      style={[styles.container, styleBtn]}
      {...otherProps}>
      {source && (
        <FastImage source={source} style={[styles.scanImage, styleIcon]} />
      )}
      <Text style={[styles.text, styleText]}>{text}</Text>
    </TouchableOpacity>
  );
}

render() {
    return (
      <View style={styles.container}>
        <RNCamera
          ref={ref => {
                this.camera = ref;
              }
          }
          autoFocus={true}
          captureAudio={false}
          style={styles.preview}
          type={RNCamera.Constants.Type.back}
          flashMode={this.state.flashMode}
          androidCameraPermissionOptions={{
            title: 'Permission to use camera',
            message: 'We need your permission to use your camera',
            buttonPositive: 'Ok',
            buttonNegative: 'Cancel',
          }}
        />
        <View style={{ flex: 0, flexDirection: 'row' }}>
          <View style={{ flex: 1, flexDirection: 'row', }}>
            <TouchableOpacity onPress={this.toggleFlash} style={styles.flash}>
              {this.state.flashMode == RNCamera.Constants.FlashMode.off
                ? <FontAwesomeIcon icon={ faBolt } style={{color: "black"}} />
                : <FontAwesomeIcon icon={ faBolt } style={{color: "yellow"}} />
              }
            </TouchableOpacity>
          </View>
          <View style={{ flex: 2, flexDirection: 'row', }}>
            <TouchableOpacity onPress={this.takePicture.bind(this)} style={styles.scan}>
              <Text>Scan</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    );
  }

Home = () => (
  <View style={styles.center}>
    <ScrollView style={styles.scroll}>
      <Image
        style={styles.image}
        source={require('../images/2020-cfc-512.png')}
      />
      <Text style={styles.subtitle}>Starter Kit</Text>
      <Text style={styles.title}>Community Collaboration</Text>
      <Text style={styles.content}>
        There is a growing interest in enabling communities to cooperate among
        themselves to solve problems in times of crisis, whether it be to
        advertise where supplies are held, offer assistance for collections, or
        other local services like volunteer deliveries.
      </Text>
      <Text style={styles.content}>
        What is needed is a solution that empowers communities to easily connect
        and provide this information to each other.
      </Text>
      <Text style={styles.content}>
        This solution starter kit provides a mobile application, along with
        server-side components, that serves as the basis for developers to build
        out a community cooperation application that addresses local needs for
        food, equipment, and resources.
      </Text>
      <View style={styles.buttonGroup}>
        <TouchableOpacity onPress={() => Linking.openURL('https://developer.ibm.com/callforcode')}>
          <Text style={styles.button}>Learn more</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => Linking.openURL('https://github.com/Call-for-Code/Solution-Starter-Kit-Cooperation-2020')}>
          <Text style={styles.button}>Get the code</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  </View>
)

Home = () => (
  <View style={styles.center}>
    <ScrollView style={styles.scroll}>
      <Image
        style={styles.image}
        source={require('../images/2020-cfc-512.png')}
      />
      <Text style={styles.subtitle}>Starter Kit</Text>
      <Text style={styles.title}>Disaster Resiliency</Text>
      <Text style={styles.content}>
        Due to climate change, floods are becoming more frequent and more severe,
        leading to specific issues for affected communities. This solution
        starter kit looks to aid potential victims better prepare for, act
        during, and recover from a flood. 
      </Text>
      <View style={styles.buttonGroup}>
        <TouchableOpacity onPress={() => Linking.openURL('https://developer.ibm.com/callforcode')}>
          <Text style={styles.button}>Learn more</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => Linking.openURL('https://github.com/Call-for-Code/Solution-Starter-Kit-Disasters-2020')}>
          <Text style={styles.button}>Get the code</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  </View>
)

ArrowBack = (props) => {
  const {...restProps} = props
  const navigation = useContext(NavigationContext)

  return (
    <TouchableOpacity activeOpacity={0.9} style={styles.container} onPress={() => navigation.goBack()}>
      <Icon name="chevron-left" size={35} color={apply('gray-900')} />
    </TouchableOpacity>
  )
}

render() {
    var result = Utils.currentUser()
    return (
      <View style={styles.container}>
        <CardView
          style={headerStyles.container}
          cardElevation={2}
          cardMaxElevation={2}>
          <Text style={headerStyles.header_label}>Settings</Text>
        </CardView>
        <ProgressLoader
          visible={this.state.visible}
          isModal={true}
          isHUD={true}
          hudColor={"#000000"}
          color={"#FFFFFF"} />
        <View style={headerStyles.header_container}>
          <View style={headerStyles.app_icon_view}>
            <Image source={result[0] && result[0].photoURL && result[0].photoURL.length != 0 ? { uri: result[0].photoURL } : require('../../../assets/icons/ic_person.png')} style={headerStyles.icon_style_logo} />
          </View>
        </View>
        <View style={headerStyles.app_label_view}>
          <Text style={headerStyles.app_label}>{result[0] && result[0].name}</Text>
        </View>
        <View style={headerStyles.app_label_view}>
          <Text style={headerStyles.app_label}>{result[0] && result[0].email}</Text>
        </View>
        <TouchableOpacity
          style={headerStyles.logout_btn_signout_container}
          onPress={this._signOut.bind(this, result[0])}>
          <View style={headerStyles.logout_btn_signout_view}>
            <View style={headerStyles.logout_btn_label_view}>
              <Text style={headerStyles.logout_btn_signout_label}>Sign Out</Text>
            </View>
          </View>
        </TouchableOpacity>
      </View>
    );
  }

Action = styled(TouchableOpacity)`
  background: ${colors.redHero};
  border-radius: 8px;
  height: 50px;
  width: 48%;

  justify-content: center;
  align-items: center;
`

CountryButton = ({item, name, style, ...rest}) => (
    <TouchableOpacity
        style={[styles.countryButton, style?.countryButtonStyles]}
        {...rest}
    >
        <Text style={[
            {
                flex: 0.2
            },
            style?.flag
        ]}>
            {item?.flag}
        </Text>
        <Text style={[{
            flex: 0.3,
        }, style?.dialCode]}>
            {item?.dial_code}
        </Text>
        <Text style={[{
            flex: 1
        }, style?.countryName]}>
            {name}
        </Text>
    </TouchableOpacity>
)

render() {
    const { profile } = this.props;
    const thumbnail = get(profile, 'avatarHashes.small');
    const { comment } = this.state;
    return (
      <View style={styles.wrapper}>
        <View style={styles.inputWrapper}>
          <AvatarImage thumbnail={thumbnail} style={styles.inputAvatarImage} />
          <AutoGrowingTextInput
            style={styles.input}
            onChangeText={this.handleChangeComment}
            value={comment}
            placeholder="Write a comment"
            placeholderTextColor={formLabelColor}
            ref={this.setInputRef}
          />
          {comment !== '' && (
            <TouchableOpacity onPress={this.submitComment}>
              <LinkText text="Post" />
            </TouchableOpacity>
          )}
        </View>
      </View>
    );
  }

export default function ButtonCTALarge(props) {
	return (
		<TouchableOpacity onPress={props.onPress}>
			<StyledButtonCTALarge>
				<StyledButtonCTALargeText>{props.text}</StyledButtonCTALargeText>
			</StyledButtonCTALarge>
		</TouchableOpacity>
	)
}

FooterComponent = () => {
  const { t } = useTranslation()

  const openInBrowser = useCallback(url => {
    Linking.openURL(url).catch(err => console.error("Couldn't load page", err))
  }, [])

  return (
    <TouchableOpacity
      style={d(styles.footer)}
      onPress={() => openInBrowser('https://openmined.org')}>
      <Text style={styles.footerText}>{t('volunteers')}</Text>
      <Image
        style={styles.openMinedLogo}
        source={require('../../../../assets/images/openmined-logo.png')}
        resizeMode="contain"
      />
    </TouchableOpacity>
  )
}

render() {
    return this.props.pressable ? (
      <TouchableOpacity onPress={() => this.showQR(this.props.detail)}>
        {this.renderCard()}
      </TouchableOpacity>
    ) : (
      this.renderCard()
    );
  }

ControlPanelItem = ({bgColor, text, onPress}) => {
    return (
        <TouchableOpacity
            style={[styles.btnItem, {backgroundColor: bgColor}]}
            onPress={() => onPress ? onPress() : null}
        >
            <Text style={styles.text}>
                {text}
            </Text>
        </TouchableOpacity>
    );
}

Delete = styled(TouchableOpacity).attrs({
    activeOpacity: 0.5,
})`
    background-color: #348eac;
    border-radius: 100px;
    position: absolute;
    top: 0;
    right: 0;
    padding: ${scale(8)}px;
`

render() {
    return (
      <AnimatedContainer style={{ top: this.state.top }}>
        <Cover>
          <Image source={require("../assets/background2.jpg")} />
          <Title>Rychillie</Title>
          <Subtitle>Frontend Developer</Subtitle>
        </Cover>
        <TouchableOpacity
          onPress={this.props.closeMenu}
          style={{
            position: "absolute",
            top: 120,
            left: "50%",
            marginLeft: -22,
            zIndex: 1,
          }}
        >
          <CloseView>
            <Ionicons name="ios-close" size={44} color="#546bfb" />
          </CloseView>
        </TouchableOpacity>
        <Content>
          {items.map((item, index) => (
            <MenuItem
              key={index}
              icon={item.icon}
              title={item.title}
              text={item.text}
            />
          ))}
        </Content>
      </AnimatedContainer>
    );
  }

Story = (props) => {
  const {
    story: {
      user: {
        id,
        image,
        name
      }
    }
  } = props;

  const navigation = useNavigation();

  const onPress = () => {
    navigation.navigate("Story", { userId: id });
  }

  return (
    <TouchableOpacity style={styles.container} onPress={onPress}>
      <ProfilePicture uri={image}/>
      <Text style={styles.name}>{name}</Text>
    </TouchableOpacity>
  )
}

Button = ({
  title,
  buttonColor,
  textColor,
  onPress = () => null,
  disabled = false,
  buttonStyle,
  textStyle,
}) => {
  const color = disabled ? "lightgrey" : buttonColor;
  return (
    <TouchableOpacity
      style={[{ ...styles.button, backgroundColor: color || "#1FC6D5" }, buttonStyle]}
      onPress={onPress}
      disabled={disabled}
    >
      <Text style={[{ ...styles.text, color: textColor || "white" }, textStyle]}>{title}</Text>
    </TouchableOpacity>
  );
}

export default function () {
  const Stack = createStackNavigator();
  StatusBar.setBarStyle('light-content');
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={homeScreen}
        options={({navigation}) => ({
          title: '',
          headerStyle: {
            backgroundColor: colors.bottomBackGround,
            shadowColor: colors.seperatorLineColor,
          },
          headerLeft: () => (
            <View style={Styles.headerLeftContainer}>
              <TouchableOpacity
                onPress={() => navigation.navigate('StoryCameraScreen')}>
                <Image
                  source={images.photo_camera}
                  style={Styles.headerLeftImage}
                />
              </TouchableOpacity>
            </View>
          ),
          headerRight: () => (
            <View>
              <TouchableOpacity
                style={Styles.headerRightContainer}
                onPress={() => navigation.navigate('DirectMessageScreen')}>
                <Image
                  source={images.direct_message}
                  style={Styles.headerRightImage}
                />
              </TouchableOpacity>
            </View>
          ),
          headerTitle: (
            <TouchableOpacity
              style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
              <Image
                source={images.logo}
                style={{width: 110, resizeMode: 'contain'}}
              />
            </TouchableOpacity>
          ),
          headerTitleStyle: {alignSelf: 'center'},
        })}
      />
      <Stack.Screen name="Story" component={StoryScreen} />
      <Stack.Screen
        name="StoryCamera"
        component={StoryCamera}
        options={{gestureDirection: 'horizontal-inverted'}} //for left to right transition
      />
    </Stack.Navigator>
  );
}

render() {
    const {data, selected, id, index} = this.props;

    console.log(id);

    if (!data) {
      return null;
    }

    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={styles.btnContainer}
          activeOpacity={1}
          onPress={this.openAnswer}>
          <View style={styles.dot}>
            <Text
              style={{
                textAlign: 'center',
                color: '#FFFFFF',
                textAlignVertical: 'center',
                fontWeight: 'bold',
              }}>
              {index + 1}
            </Text>
          </View>
          <MediumText
            style={{
              flex: 1,
              color: '#000',
              lineHeight: 23,
              fontSize: fontSize.normal,
            }}>
            {data.question}
          </MediumText>
          <Entypo
            name={selected ? 'chevron-thin-up' : 'chevron-thin-down'}
            size={12}
            color={'#C4C4C4'}
            style={{paddingLeft: 12}}
          />
        </TouchableOpacity>
        {selected && (
          <HTML
            html={data.answer}
            containerStyle={{paddingTop: 7, marginBottom: -7}}
            tagsStyles={CUSTOM_STYLES}
            imagesMaxWidth={Dimensions.get('window').width}
            allowFontScaling={false}
            onLinkPress={this.onLinkPress}
          />
        )}
      </View>
    );
  }

Skip = ({ ...props }) => (
    <TouchableOpacity
        style={{ marginHorizontal: 10, color: "#fff" }}
        {...props}
    >
        <Text style={{ fontSize: 16, color: "#fff" }}>Skip</Text>
    </TouchableOpacity>
)

render() {
      const { navigate } = this.props.navigation;
  return (
    <View style={styles.container}>
{/* Top Row of App */}

{/* First Row of Fridge */} 
        <View style={styles.fridgeGrid}>
          <View style={styles.fridgeRow}>
            <View style={styles.rowItems}>
            <TouchableOpacity onPress={() => { navigate("Inside your Fridge") }} style={styles.fridgeButtons}>
                <View>
                <Text style={{fontSize: 24}}>Freezer</Text>
                </View>
              </TouchableOpacity>
            </View>

            <View style={styles.rowItems}>
              <TouchableOpacity style={styles.fridgeButtons}>
                <View>
                <Text style={{fontSize: 24}}>Meat</Text>
                </View>
              </TouchableOpacity>
            </View>
        </View>
{/* Second Row of Fridge */} 
        <View style={styles.fridgeRow}>
            <View style={styles.rowItems}>
              <TouchableOpacity style={styles.fridgeButtons}>
                <View>
                <Text style={{fontSize: 24}}>Produce</Text>
                </View>
              </TouchableOpacity>
            </View>

            <View style={styles.rowItems}>
              <TouchableOpacity style={styles.fridgeButtons}>
                <View>
                <Text style={{fontSize: 24}}>Non-Perishables</Text>
                </View>
              </TouchableOpacity>
            </View>
        </View>
{/* Third Row of Fridge */}      
        <View style={styles.fridgeRow}>
            <View style={styles.rowItems}>
              <TouchableOpacity style={styles.fridgeButtons}>
                <View>
                <Text style={{fontSize: 24}}>Perishables</Text>
                </View>
              </TouchableOpacity>
            </View>

            <View style={styles.rowItems}>
              <TouchableOpacity style={styles.fridgeButtons}>
                <View>
          <Text style={{fontSize: 24}}>Dairy</Text>
                </View>
              </TouchableOpacity>
            </View>
        </View>
        
    </View>
    <ScrollModal visible={this.state.isFreezerOn} onClose={this.toggleModal}> </ScrollModal>
    </View>
          
  );
}

MyResources = function ({ navigation }) {
  const [items, setItems] = React.useState([]);

  React.useEffect(() => {
    navigation.addListener('focus', () => {
      search({ userID: userID() })
        .then(setItems)
        .catch(err => {
          console.log(err);
          Alert.alert('ERROR', 'Please try again. If the problem persists contact an administrator.', [{text: 'OK'}]);
        });
    })
  }, []);

  const Item = (props) => {
    return (
      <TouchableOpacity style={styles.itemTouchable}
          onPress={() => { navigation.navigate('Edit Donation', { item: props }); }}>
        <View style={styles.itemView}>
          <Text style={styles.itemName}>{props.name}</Text>
          <Text style={styles.itemQuantity}> ( {props.quantity} ) </Text>
        </View>
        <Text style={styles.itemDescription}>{props.description}</Text>
      </TouchableOpacity>
    );
  };
  
  if (items.length > 0) {
    return (
      <FlatList style={styles.flatListView}
        data={items}
        renderItem={({ item }) => <Item {...item} />}
        keyExtractor={item => item.id || item['_id']}
      />
    )
  } else {
    return (
      <View style={styles.emptyListView}>
        <Text style={styles.emptyListText}>You currently have no donations listed</Text>
      </View>
    )
  }
}

Account = (props) => {
  const guestView = () => {
    return (
      <ScrollView contentContainerStyle={styles.content}>
        <StatusBar backgroundColor={apply("blue-500")} barStyle='light-content' />
        <View style={styles.helloContainer}>
          <Text style={styles.helloText}>Hi!</Text>
        </View>
        <View style={styles.btnContainer}>
          <View style={apply('flex')}>
            <TouchableOpacity style={styles.btnAuth} activeOpacity={0.9} onPress={() => props.navigation.navigate('LoginScreen')}>
              <Text style={styles.btnAuthLabel}>Login</Text>
            </TouchableOpacity>
          </View>
          <View style={apply('flex ml-5')}>
            <TouchableOpacity style={styles.btnAuth} activeOpacity={0.9} onPress={() => props.navigation.navigate('RegisterScreen')}>
              <Text style={styles.btnAuthLabel}>Register</Text>
            </TouchableOpacity>
          </View>
        </View>
      </ScrollView>
    )
  }

  const userView = () => {
    const { data } = props.profile

    return (
      <ScrollView contentContainerStyle={styles.content}>
        <View style={styles.helloContainer}>
          <Text style={styles.helloText}>Hi, {data?.username}!</Text>
        </View>
        <View style={styles.btnContainer}>
          <View style={apply('flex')}>
            <TouchableOpacity style={styles.btnAuth} activeOpacity={0.9} onPress={() => props.navigation.navigate('OrderList')}>
              <Text style={styles.btnAuthLabel}>Orders</Text>
            </TouchableOpacity>
          </View>
          <View style={apply('flex ml-5')}>
            <TouchableOpacity style={[styles.btnAuth, apply('bg-red-500')]} activeOpacity={0.9} onPress={() => props.doLogout()}>
              <Text style={styles.btnAuthLabel}>Logout</Text>
            </TouchableOpacity>
          </View>
        </View>
      </ScrollView>
    )
  }

  return (
    <SafeAreaView style={styles.container}>
      {props.user ? userView() : guestView()}
    </SafeAreaView>
  )
}

export default function Detail() {
  const navigation = useNavigation();
  const route = useRoute();

  const incident = route.params.incident;
  const message = `Olá ${
    incident.name
  }, estou entrando em contato pois gostaria de ajudar no caso "${
    incident.title
  }" com o valor de ${Intl.NumberFormat("pt-BR", {
    style: "currency",
    currency: "BRL"
  }).format(incident.value)}`;

  function navigateBack() {
    navigation.goBack();
  }

  function sendMail() {
    MailComposer.composeAsync({
      subject: `Herói do caso: ${incident.title}`,
      recipients: [incident.email],
      body: message
    });
  }

  function sendWhatsapp() {
    Linking.openURL(
      `whatsapp://send?phone=${incident.whatsapp}&text=${message}`
    );
  }

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Image source={logoImg} />

        <TouchableOpacity onPress={navigateBack}>
          <Feather name="arrow-left" size={28} color="#E82041" />
        </TouchableOpacity>
      </View>

      <View style={styles.incident}>
        <Text style={[styles.incidentProperty, { marginTop: 0 }]}>ONG:</Text>
        <Text style={styles.incidentValue}>
          {incident.name} de {incident.city}/{incident.uf}
        </Text>

        <Text style={styles.incidentProperty}>CASO:</Text>
        <Text style={styles.incidentValue}>{incident.title}</Text>

        <Text style={styles.incidentProperty}>VALOR:</Text>
        <Text style={styles.incidentValue}>
          {Intl.NumberFormat("pt-BR", {
            style: "currency",
            currency: "BRL"
          }).format(incident.value)}
        </Text>
      </View>

      <View style={styles.contactBox}>
        <Text style={styles.heroTitle}>Salve o dia!</Text>
        <Text style={styles.heroTitle}>Seja o herói desse caso.</Text>

        <Text style={styles.heroDescription}>Entre em contato:</Text>

        <View style={styles.actions}>
          <TouchableOpacity style={styles.action} onPress={sendWhatsapp}>
            <Text style={styles.actionText}>WhatsApp</Text>
          </TouchableOpacity>

          <TouchableOpacity style={styles.action} onPress={sendMail}>
            <Text style={styles.actionText}>E-mail</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
}

render() {

    var planner = JSON.parse(JSON.stringify(this.props.plannerList)).plannerList;
    var agenda = planner == null ? undefined : planner;

    return (
      <View style={styles.container}>
        <CardView
          style={headerStyles.container}
          cardElevation={2}
          cardMaxElevation={2}>
          <Row size={12}>
            <Col sm={3} md={4} lg={3}>
              <Text style={headerStyles.header_label}>Calendar</Text>
            </Col>
            <Col sm={7}>
              <View style={headerStyles.search_planner_view}>
                <TouchableOpacity
                  style={headerStyles.seach_planner_btn_mview}
                  onPress={() => this.closeSyncDialog(true)}>
                  <Image
                    style={headerStyles.search_planner_menuBtn}
                    source={require('../../../assets/icons/sync.png')}
                  />
                </TouchableOpacity>
              </View>
            </Col>
            <Col sm={2}>
              <View style={headerStyles.search_planner_view}>
                <TouchableOpacity
                  style={headerStyles.seach_planner_btn_mview}
                  onPress={() => this.props.navigation.navigate(Utils.PLANNER_LIST_SCREEN, { key: Utils.ALL_PLANNERS })}>
                  <Image
                    style={headerStyles.search_planner_menuBtn}
                    source={require('../../../assets/icons/ic_search.png')}
                  />
                </TouchableOpacity>
              </View>
            </Col>
          </Row>
          <SyncCalendarDialog
            syncDialogVisible={this.state.syncDialogVisible}
            syncDone={this.state.syncDone}
            closeSyncDialog={this.closeSyncDialog}
          />
        </CardView>
        <View style={styles.calendar_view}>
          <CalendarList
            markedDates={agenda}
            minDate={Utils.APP_MIN_CALENDAR_DATE}
            onDayPress={(days) => { agenda && agenda[days.dateString] && this.checkPlannerByDate(days.dateString) }}
            pastScrollRange={50}
            futureScrollRange={50}
            scrollEnabled={true}
            showScrollIndicator={false}
            markingType={'multi-dot'}
            multiDotLimit={{ limit: 3, type: 'number' }}
          />
        </View>
      </View>
    );
  }

export default function Detail() {
  const navigation = useNavigation();
  const route = useRoute();
  const { incident } = route.params;
  const message = `Olá ${incident.ong.name}, estou entrando em contato pois gostaria de ajudar no caso "${incident.title}" com o valor de ${incident.valueFormated}.`;

  function sendMail() {
    MailComposer.composeAsync({
      subject: `Herói do caso: ${incident.title}`,
      recipients: [`${incident.ong.email}`],
      body: message,
    });
  }

  function sendWhatsapp() {
    Linking.openURL(`whatsapp://send?phone=+55${incident.ong.whatsapp}&text=${message}`);
  }

  return (
    <Container>
      <Header>
        <Image source={logoImg} />
        <TouchableOpacity onPress={() => navigation.goBack()}>
          <Feather name="arrow-left" size={28} color={colors.redHero} />
        </TouchableOpacity>
      </Header>

      <Incident>
        <GroupRow>
          <View style={{ marginRight: 16, width: '50%' }}>
            <IncidentProperty style={{ marginTop: 0 }}>
              CASO:
            </IncidentProperty>
            <IncidentValue>{incident.title}</IncidentValue>
          </View>

          <View style={{ flex: 1 }} >
            <IncidentProperty style={{ marginTop: 0 }}>
              ONG:
            </IncidentProperty>
            <IncidentValue ellipsizeMode="tail" >
              {incident.ong.name} de {incident.ong.city}/{incident.ong.uf}
            </IncidentValue>
          </View>
        </GroupRow>

        <IncidentProperty>DESCRIÇÃO:</IncidentProperty>
        <IncidentValue>{incident.description}</IncidentValue>

        <IncidentProperty>VALOR:</IncidentProperty>
        <IncidentValue>{incident.valueFormated}</IncidentValue>
      </Incident>

      <ContactBox>
        <HeroTitle>Salve o dia!</HeroTitle>
        <HeroTitle>Seja o herói desse caso.</HeroTitle>

        <HeroDescription>Entre em contato:</HeroDescription>

        <Actions>
          <Action onPress={sendWhatsapp}>
            <ActionText>WhatsApp</ActionText>
          </Action>

          <Action onPress={sendMail}>
            <ActionText>E-mail</ActionText>
          </Action>
        </Actions>
      </ContactBox>
    </Container>
  );
}

GDPRScreen = memo(({ navigation, route }) => {
    const [darkMode, setDarkMode] = useMMKVBoolean("darkMode", storage)
    const [lang, setLang] = useMMKVString("lang", storage)
    const [gdpr, setGdpr] = useState("")
    const [isLoading, setIsLoading] = useState(true)
    const isMounted = useMountedState()
    
    useEffect(() => {
        fetchGDPRInfo().then((info) => {
            if(isMounted()){
                setGdpr(JSON.stringify(info, null, 2))
                setIsLoading(false)
            }
        }).catch((err) => {
            console.log(err)

            showToast({ message: err.toString() })
        })
    }, [])

    return (
        <>
            <View style={{
                flexDirection: "row",
                justifyContent: "flex-start",
                backgroundColor: darkMode ? "black" : "white"
            }}>
                <TouchableOpacity style={{
                    marginTop: Platform.OS == "ios" ? 17 : 4,
                    marginLeft: 15,
                }} onPress={() => navigation.goBack()}>
                    <Ionicon name="chevron-back" size={24} color={darkMode ? "white" : "black"}></Ionicon>
                </TouchableOpacity>
                <Text style={{
                    color: darkMode ? "white" : "black",
                    fontWeight: "bold",
                    fontSize: 24,
                    marginLeft: 10,
                    marginTop: Platform.OS == "ios" ? 15 : 0
                }}>
                    {i18n(lang, "showGDPR")}
                </Text>
            </View>
            <ScrollView style={{
                height: "100%",
                width: "100%",
                backgroundColor: darkMode ? "black" : "white"
            }}>
                {
                    isLoading ? (
                        <ActivityIndicator size={"small"} color={darkMode ? "white" : "black"} style={{
                            marginTop: "70%"
                        }} />
                    ) : (
                        <Text style={{
                            color: darkMode ? "white" : "black",
                            padding: 22
                        }}>
                            {striptags(gdpr)}    
                        </Text>
                    )
                }
            </ScrollView>
        </>
    )
})

export default function MovieList(props) {

  const [ movies, setMovies ] = useState([]);
  let token = null;

  const getData = async () => {
    token = await AsyncStorage.getItem('MR_Token');
    if (token) {
      getMovies();
    } else {
      props.navigation.navigate("Auth")
    }
  };
  
  useEffect(() => {
    getData();
  }, []);

  const getMovies = () => {
    console.log(token);
    fetch(`http://www.dynatraceworkshops.com:8079/api/movies/`, {
      method: 'GET',
      headers: {
        'Authorization': `Token ${token}`
      }
    })
    .then( res => res.json())
    .then( jsonRes => setMovies(jsonRes))
    .catch( error => console.log(error));
  }

  const movieclicked = (movie) => {
    props.navigation.navigate("Detail", {movie: movie, title: movie.title, token: token})
  }

  return (
    <View>
      <Image source={require('../assets/MR_logo.png')}
        style={{width: '100%', height: 135, paddingTop: 30}}
        resizeMode="contain"/>

      <FlatList 
        data={movies}
        renderItem={({item}) => (
          <TouchableOpacity onPress={() => movieclicked(item)}>
            <View style={styles.item}>
              <Text style={styles.itemText}>{item.title}</Text>
            </View>
          </TouchableOpacity>
        )}
        keyExtractor={(item, index) => index.toString()}
      />
    </View>
  );
}