@react-navigation/native#useNavigation JavaScript Examples

// const Stack = createSharedElementStackNavigator();

function RedirectScreen() {
  var nav = useNavigation();
  var users = useSelector(i => i.userBookmarks);
  if (users && users[0]) {
    nav.replace('UserDetails', { username: users[0].username });
  }
  return <Text>_redirect</Text>;
}

Stations = () => {
  const navigation = useNavigation()
  const { i18n } = useTranslation()
  const { dark } = useTheme()

  const [db, setDb] = useState({
    markers: []
  })

  useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      const station = i18n.language == 'en' ? EnDb.Stops : GeDb.Stops
      setDb({ markers: station })
    })

    // Cleanup
    return unsubscribe
  }, [navigation])

  // Opens Timetable screen which takes some props from map marker
  const openTimetable = (stopId, name) => {
    navigation.navigate('Timetable', {
      stationTimetableId: stopId,
      metadata: name
    })
  }

  return (
    <View style={styles.container}>
      <Map
        markerSource={db.markers}
        onPressHandler={openTimetable}
        isDark={dark}
      />
    </View>
  )
}

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

export default function Home() {
  const navigation = useNavigation();

  return (
    <Styled.Container>
      <Styled.DescriptionContainer>
        <Styled.Logo source={logo} />
        <Styled.Title>English Course</Styled.Title>
        <Styled.Description>
          Aprenda Inglês da forma certa, e o melhor rápido e fácil
        </Styled.Description>
      </Styled.DescriptionContainer>
      <Styled.ButtonsContainer>
        <Styled.ButtonContainer
          filled
          onPress={() => navigation.navigate('sign-up-stack')}
        >
          <Styled.ButtonText filled>Começar Agora</Styled.ButtonText>
        </Styled.ButtonContainer>
        <Styled.ButtonContainer
          onPress={() => navigation.navigate('sign-in-stack')}
        >
          <Styled.ButtonText>Já tenho uma conta</Styled.ButtonText>
        </Styled.ButtonContainer>
      </Styled.ButtonsContainer>
    </Styled.Container>
  );
}

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

  if (route.state && route.state.index > 0) {
    navigation.setOptions({ tabBarVisible: false });
  } else {
    navigation.setOptions({ tabBarVisible: true });
  }

  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}
      mode="modal"
    >
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Section" component={Section} />
      <Stack.Screen name="Video" component={VideoScreen} />
    </Stack.Navigator>
  );
}

DetailFollowerScreen = () => {
  const navigation = useNavigation();

  const renderToolbar = () => {
    return (
      <View style={styles.toolbar}>
        <StatusBar
          hidden={false}
          backgroundColor={colors.primary}
          barStyle={barStyle.lightContent}
        />
        <TouchableOpacity
          style={styles.viewWrapIcLeft}
          onPress={() => navigation.goBack()}>
          <MaterialCommunityIcons
            name={'arrow-left'}
            size={30}
            color={colors.white}
          />
        </TouchableOpacity>
        <View style={styles.viewWrapTitleToolbar}>
          <Text style={styles.titleToolbar}>Detail follower</Text>
        </View>
        <View style={styles.viewWrapIcRight} />
      </View>
    );
  };

  return (
    <View style={styles.mainContainer}>
      {renderToolbar()}
      <Text style={styles.textContent}>
        Example this is the detail follower screen
      </Text>
    </View>
  );
}

Index = ({ recents, songs, style = {} }) => {
	const { navigate } = useNavigation();
	const [audios, setAudios] = useState([]);

	const handlePress = (song, index) => {
		navigate(SCREENS.PLAYING, {
			forcePlay: true,
			song,
			index,
		});
	};

	useEffect(() => {
		setAudios(recents);
	}, [recents]);

	return (
		audios &&
		audios.length > 0 && (
			<Container style={style} title="Recently played">
				{audios.map((index, key) => (
					<Card.Recent
						key={key}
						style={[key === 0 && { marginLeft: 20 }]}
						imageURL={songs[index]?.img}
						title={songs[index]?.title}
						author={songs[index]?.author}
						onPress={() => handlePress(songs[index], index)}
					/>
				))}
			</Container>
		)
	);
}

function CompanyImage({uri, width, height, style, company_slug}) {
  const [svg, setSvg] = useState();
  const navigation = useNavigation();
  useEffect(() => {
    if (uri.includes('.svg')) {
      getSvgData(uri).then(res => {
        setSvg(res.data);
      });
    }
  }, [uri]);
  function onPressImage(slug) {
    navigation.push('SearchResults', {params: {company: slug}});
  }
  return (
    <TouchableOpacity
      activeOpacity={0.75}
      onPress={() => onPressImage(company_slug)}>
      {uri.includes('.svg') ? (
        svg ? (
          <SvgXml style={style} width={width} height={height} xml={svg} />
        ) : (
          <Image
            style={style}
            source={{
              uri: 'https://kodilan.com/img/empty-company-logo.8437254b.png',
            }}
          />
        )
      ) : (
        <Image style={style} source={{uri}} />
      )}
    </TouchableOpacity>
  );
}

Header = () => {
  const { t } = useTranslation()
  const navigation = useNavigation()
  const theme = useTheme()
  const { currentRoute, params } = usePlatformLocation()
  const { defaultPath } = useContext(RoutesContext)
  const isHome = currentRoute.path === defaultPath
  const translatedName = t(currentRoute.name)
  const title = replaceParams(translatedName, params)
  return (
    <NativeHeader
      leftComponent={<Left isHome={isHome} goBack={navigation.goBack} />}
      centerComponent={{
        text: title,
        style: {
          color: theme.colors.white,
          fontSize: 21
        }
      }}
      rightComponent={<Right toggleDrawer={navigation.toggleDrawer} />}
    />
  )
}

ResourceCardNoteActions = ({
  hasNotes, showNotes, setShowNotes, resourceId,
}) => {
  const navigation = useNavigation();

  if (!hasNotes) {
    return (
      <TouchableOpacity style={styles.addNoteButton} onPress={() => navigation.navigate('Notes', { resourceId })}>
        <Entypo name="squared-plus" size={24} color={Colors.darkgrey2} />
        <BaseText variant="title" style={styles.buttonText}>Add Notes</BaseText>
      </TouchableOpacity>
    );
  }

  const showNotesText = showNotes ? 'Hide Notes' : 'Show Notes';
  const showNotesIcon = showNotes ? 'sticky-note' : 'sticky-note-o';
  return (
    <View style={styles.actionsContainer}>
      <TouchableOpacity style={styles.addNoteButton} onPress={() => navigation.navigate('Notes', { resourceId })}>
        <Entypo name="squared-plus" size={24} color={Colors.darkgrey2} />
        <BaseText variant="title" style={styles.buttonText}>Add Notes</BaseText>
      </TouchableOpacity>
      <View style={styles.verticalDivider} />
      <TouchableOpacity style={styles.addNoteButton} onPress={() => setShowNotes(!showNotes)}>
        <FontAwesome name={showNotesIcon} size={20} color={Colors.darkgrey2} />
        <BaseText variant="title" style={styles.buttonText}>{showNotesText}</BaseText>
      </TouchableOpacity>
    </View>
  );
}

export default function ClanScreen({ route }) {
  var [scale, setScale] = React.useState(1);
  var theme = useSelector(i => i.themes[i.theme]);
  var clan_id = route.params.clanid;
  var game_id = (route.params.year && route.params.month) ? (route.params.year*12)+(route.params.month-1)-24158 : config.clan.game_id;
  const moment = useMoment();
  const navigation = useNavigation();
  return (
    <ScrollView style={{ backgroundColor: theme.page.bg, flex: 1 }} contentContainerStyle={{ padding: 4 }}>
      <View style={{ padding: 4 * scale }}>
        <ClanStats clan_id={clan_id} game_id={game_id} />
      </View>
      <View style={{ padding: 4 * scale }}>
        <ClanRequirements scale={scale} zoom={true} game_id={game_id} />
      </View>

      <View style={{ padding: 4 * scale }}>
        <Dropdown mode="outlined" dense={true} selectedValue={game_id} onValueChange={(value) => {
          if(value === config.clan.game_id) {
            navigation.setParams({
              year: undefined,
              month: undefined,
            })
          } else {
            const reverse = config.clan.reverse_game_id_function(value);
            navigation.setParams({
              year: reverse.y,
              month: reverse.m + 1,
            })
          }
        }}>
          {array.slice().reverse().map(i => <DropdownItem value={i.i} label={moment(i.l).format('MMMM YYYY')} />)}
        </Dropdown>
      </View>
    </ScrollView>
  );
  return (
    <ScrollView horizontal={true} style={{ backgroundColor: theme.page.bg, flex: 1 }}>
      <ScrollView style={{ backgroundColor: "green" ?? theme.page.bg, flex: 1 }} contentContainerStyle={{ backgroundColor: "red", justifyContent: "flex-start", alignItems: "flex-start" }}>
        <View style={{ padding: 4 * scale, flex: 1 }}>
          <ClanStats clan_id={clan_id} game_id={config.clan.game_id} />
        </View>
        <View style={{ padding: 4 * scale, flex: 1 }}>
          <ClanRequirements scale={scale} zoom={true} game_id={config.clan.game_id} />
        </View>
      </ScrollView>
    </ScrollView>
  );
}

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

About = () => {
  const { t, i18n } = useTranslation()
  const navigation = useNavigation()
  const { dark, theme, toggle } = useContext(ThemeContext)

  const [appLanguage, setAppLanguage] = useState(i18n.language)

  const language = [
    { lang: 'en', label: 'English ??' },
    { lang: 'ge', label: 'ქართული ??' }
  ]

  const changeLangHandler = async languageSelected => {
    setAppLanguage(languageSelected)
    await i18n.changeLanguage(languageSelected)
    await AsyncStorage.setItem('i18NextBusTimetable', languageSelected)
  }

  // Opens Feedback screen
  const feedbackHandler = () => navigation.navigate('Feedback')

  return (
    <View style={styles.container}>
      <Text style={[styles.info, { color: theme.text }]}>
        {t('about.info')}
      </Text>

      <Picker
        selectedValue={appLanguage}
        onValueChange={changeLangHandler}
        style={styles.picker}
      >
        {language.map(({ lang, label }, i) => {
          return (
            <Picker.Item
              key={i}
              value={lang}
              label={label}
              color={theme.text}
            />
          )
        })}
      </Picker>

      <View style={styles.wrap}>
        <Button
          onPress={feedbackHandler}
          text={t('about.feedbackButton')}
          buttonColor={theme.buttonColor}
          textColor={theme.buttonText}
          margin={30}
          paddingVertical={2}
          fontSize={14}
        />
        <Switch isOn={dark} onToggle={toggle} />
      </View>

      <Text style={{ color: theme.text }}>
        {t('about.madeBy')} {new Date().getFullYear()}
      </Text>
    </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>
  );
}

export default function ForgotPasword() {
  const [email, setEmail] = useState('');
  const navigation = useNavigation();

  function handleSubmit() {
    if (email === '') {
      return Alert.alert('Aviso', 'Preencha o campo de e-mail.');
    }
    console.log(email);
  }

  return (
    <Keyboard keyboardVerticalOffset={0} behavior="padding" enabled={false}>
      <Container>
        <TopContainer>
          <Title>Esqueceu a senha?</Title>
          <BoxDescription>
            <Description>
              {`Digite seu endereço de e-mail
        e enviaremos um link
      para redefinir sua senha`}
            </Description>
          </BoxDescription>
        </TopContainer>

        <View>
          <Label>E-mail</Label>
          <Input
            autoFocus
            autoCapitalize="none"
            placeholder="[email protected]"
            placeholderTextColor="#00000066"
            keyboardType="email-address"
            selectionColor="#006bad66"
            onChangeText={setEmail}
            value={email}
          />

          <MainButton
            onPress={() => handleSubmit()}
            label={'Recuperar senha'}
          />
        </View>

        <BottomContainer>
          <BottomContainerText>Não tem uma conta?</BottomContainerText>
          <TouchableOpacity onPress={() => navigation.navigate('SignUp')}>
            <BottomContainerTextTouch>Cadastre-se</BottomContainerTextTouch>
          </TouchableOpacity>
        </BottomContainer>
      </Container>
    </Keyboard>
  );
}

export default function CustomDrawerContent({progress, ...rest}) {
  const navigation = useNavigation();
  const {closeDrawer} = rest;
  const {navigate} = navigation;

  const authContext = useContext(CTX);
  const {_logout} = authContext;

  // const {loading, error, data} = useQuery(GET_GREETING);
  function _onClose() {
    closeDrawer();
  }

  function _onLogout() {
    firebase.auth().signOut();
    // _logout();
    closeDrawer();
    navigate('Login');
  }

  const translateX = Animated.interpolate(progress, {
    inputRange: [0, 1],
    outputRange: [-100, 0],
  });

  return (
    <Animated.View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        transform: [{translateX}],
      }}>
      {/* <SafeAreaView style={{flex: 1}}> */}

      <Image
        style={{width: 380, height: 150}}
        source={require('../assets/background.png')}
      />
      <Text>Hello, Chin</Text>
      <TouchableOpacity onPress={_onLogout}>
        <Text style={{color: 'black'}}>Log out</Text>
      </TouchableOpacity>
      {/* </SafeAreaView> */}
    </Animated.View>
  );
}

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="#e02041" />
        </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}> Email </Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  )
}

export default function SignIn() {
  const [email, setEmail] = useState('[email protected]');
  const [password, setPassword] = useState('123123');

  const navigation = useNavigation();
  const auth = useAuth();

  return (
    <Styled.Container>
      <Styled.FormContainer>
        <Styled.Input
          first
          placeholder="Email"
          value={email}
          onChangeText={(text) => setEmail(text)}
        />
        <Styled.Input
          placeholder="Senha"
          secureTextEntry
          value={password}
          onChangeText={(text) => setPassword(text)}
        />
        <Styled.ForgotButtonContainer
          onPress={() => navigation.navigate('forgot-password')}
        >
          <Styled.ForgotButtonText>Esqueci Minha Senha</Styled.ForgotButtonText>
        </Styled.ForgotButtonContainer>
        <Styled.ButtonContainer onPress={() => auth.signIn(email, password)}>
          <Styled.ButtonText>Entrar</Styled.ButtonText>
        </Styled.ButtonContainer>
        <Styled.DividerContainer>
          <Styled.DividerLine />
          <Styled.DividerText>ou</Styled.DividerText>
        </Styled.DividerContainer>
        <Styled.SocialButtonsContainer>
          <Styled.FacebookButtonContainer>
            <Styled.FacebookButtonIcon name="facebook-f" />
            <Styled.FacebookButtonText>Facebook</Styled.FacebookButtonText>
          </Styled.FacebookButtonContainer>
          <Styled.GoogleButtonContainer>
            <Styled.GoogleButtonIcon name="google" />
            <Styled.GoogleButtonText>Google</Styled.GoogleButtonText>
          </Styled.GoogleButtonContainer>
        </Styled.SocialButtonsContainer>
      </Styled.FormContainer>
      <Styled.UseTermsContainer
        onPress={() => navigation.navigate('use-terms')}
      >
        <Styled.UseTermsDescription>
          Ao entrar no English Course, você concorda com os nossos{' '}
          <Styled.UseTermsBold>Termos de Uso</Styled.UseTermsBold> e{' '}
          <Styled.UseTermsBold>Política de Privacidade</Styled.UseTermsBold>
        </Styled.UseTermsDescription>
      </Styled.UseTermsContainer>
    </Styled.Container>
  );
}

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

Input = ({ fieldName, label, required, ...props }) => {
  const [isFocused, setIsFocused] = useState(false);
  const [field, meta, helpers] = useField(fieldName);
  const navigation = useNavigation();

  const goToEditAnimation = () => {
    navigation.navigate('DrillEditorAnimationPage', {
      animation: field.value,
      onAnimationChange,
    });
  };

  const onAnimationChange = (animation) => {
    helpers.setValue(animation);
  };

  return (
    <View style={styles.group}>
      <View style={styles.label}>
        {required && <Text style={styles.error}>* </Text>}
        <Text>{label}</Text>
      </View>
      <View style={styles.buttons}>
        <Button
          onPress={() => goToEditAnimation()}
          text={field.value ? I18n.t('shared.form.animationInput.edit') : I18n.t('shared.form.animationInput.add')}
          small
          light
          style={styles.button}
          testID="editAnimation"
        />
        {field.value && (
          <Button
            onPress={() => onAnimationChange(undefined)}
            text={I18n.t('shared.form.animationInput.clear')}
            small
            light
            testID="deleteAnimation"
            style={styles.button}
          />
        )}
      </View>
      {meta.error && meta.touched && <Text style={styles.error}>{meta.error}</Text>}
    </View>
  );
}

CounterScreen = () => {
  const navigation = useNavigation();
  const counter = useRef(0);
  const [counterState, setCounterState] = useState(0);

  const updateState = () => {
    counter.current++;
    setCounterState(counterState + 1);
  };

  const renderToolbar = () => {
    return (
      <View style={styles.toolbar}>
        <StatusBar
          hidden={false}
          backgroundColor={colors.primary}
          barStyle={barStyle.lightContent}
        />
        <TouchableOpacity
          style={styles.viewWrapIcLeft}
          onPress={navigation.openDrawer}>
          <MaterialCommunityIcons
            name={'menu'}
            size={30}
            color={colors.white}
          />
        </TouchableOpacity>
        <View style={styles.viewWrapTitleToolbar}>
          <Text style={styles.titleToolbar}>Counter</Text>
        </View>
        <View style={styles.viewWrapIcRight} />
      </View>
    );
  };

  const renderButton = () => {
    return (
      <TouchableOpacity style={styles.btnIncrease} onPress={updateState}>
        <Text style={styles.textBtnIncrease}>Increase</Text>
      </TouchableOpacity>
    );
  };

  const renderData = () => {
    return (
      <View style={{margin: 20}}>
        <Text style={styles.text}>State count: {counterState}</Text>
        <Text style={styles.text}>Instance count: {counter.current}</Text>
      </View>
    );
  };

  return (
    <View style={styles.mainContainer}>
      {renderToolbar()}
      {renderButton()}
      {renderData()}
    </View>
  );
}

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

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

  function navigateBack() {
    navigation.goBack()
  }

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

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

  return (
    <View style={ styles.detailsContainer }>

      <View style={ styles.headerContainer }>
        <Image source={ logoImage }/>

        <TouchableOpacity style={ styles.headerButton } onPress={ navigateBack }>
          <Feather name="arrow-left" size={ 28 } color="#E02041"/>
          <Text style={ styles.headerButtonText }>Voltar</Text>
        </TouchableOpacity>
      </View>

      <View style={ styles.incident }>
        <Text style={ styles.incidentOng }>
          { incident.name } de { incident.city }/{ incident.uf }
        </Text>

        <Text style={ styles.incidentDescription }>
          { incident.description }
        </Text>

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

      <View style={ styles.contact }>
        <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.contactButtons }>
          <TouchableOpacity onPress={ sendWhatsapp } style={ styles.buttonWhatsapp }>
            <FontAwesome name="whatsapp" size={ 32 } color="#E9FAEF"/>
            <Text style={[ styles.buttonText, styles.buttonTextWhatsapp ]}>Whatsapp</Text>
          </TouchableOpacity>

          <TouchableOpacity onPress={ sendEmail } style={ styles.buttonEmail }>
            <FontAwesome name="envelope-o" size={ 30 } color="#FBE8EC"/>
            <Text style={[ styles.buttonText, styles.buttonTextEmail ]}>E-mail</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  )
}

function PostPreview({data}) {
  const navigation = useNavigation();
  function onPressPost() {
    navigation.push('Post', {data});
  }
  return (
    <TouchableOpacity
      style={styles.post}
      activeOpacity={0.75}
      onPress={() => onPressPost()}>
      <View style={styles.top}>
        <View style={styles.flexStyle}>
          <Text style={styles.title}>{data.position}</Text>
          <PostType type={data.type} />
        </View>
        <CompanyImage
          style={styles.image}
          uri={data.company.logo}
          width={40}
          height={40}
          company_slug={data.company.slug}
        />
      </View>
      <View style={styles.info}>
        <View style={styles.infoItem}>
          <Icon name="briefcase" color="#333" size={14} />
          <Text style={styles.infoText} numberOfLines={1}>
            {data.company.name}
          </Text>
        </View>
        <View style={styles.infoItem}>
          <Icon name="map-pin" color="#333" size={14} />
          <Text style={styles.infoText} numberOfLines={1}>
            {data.location}
          </Text>
        </View>
        <View style={styles.infoItem}>
          <Icon name="clock" color="#333" size={14} />
          <Text style={styles.infoText} numberOfLines={1}>
            {timeSince(data.updated_at)}
          </Text>
        </View>
      </View>
      {data.tags.length ? (
        <Tags
          tags={data.tags}
          slug={data.slug}
          style={styles.tags}
          tagStyle={styles.tag}
          tagTextStyle={styles.tagText}
        />
      ) : null}
    </TouchableOpacity>
  );
}

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

HeaderComponent = ({ username, postCount }) => {
  const { signOut, authState } = React.useContext(AuthContext)
  const { theme, changeTheme } = React.useContext(ThemeContext)
  const { colors } = useTheme()
  const navigation = useNavigation()

  return (
    <View style={[styles.userInfo, { backgroundColor: colors.bgColor }]}>
      <View style={styles.infoBox}>
        <Text style={[styles.label, { color: colors.text }]}>Username</Text>
        <Text style={{ color: colors.text }}>{username ?? authState.userInfo.username}</Text>
      </View>
      <View style={styles.infoBox}>
        <Text style={[styles.label, { color: colors.text }]}>Post Count</Text>
        <Text style={{ color: colors.text }}>{postCount}</Text>
      </View>
      {username === authState.userInfo.username && (
        <>
          <View style={[styles.line, { borderColor: colors.border }]} />
          <TouchableOpacity
            onPress={() => changeTheme(theme === 'light' ? 'dark' : 'light')}
            style={styles.infoBox}
          >
            {theme === 'light' ? <Moon color={colors.icon} /> : <Sun color={colors.icon} />}
            <Text style={{ color: colors.text }}>
              {theme === 'light' ? 'Dark Mode' : 'Light Mode'}
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.infoBox}
            onPress={() => {
              signOut()
              navigation.navigate('Home')
            }}
          >
            <LogOut color={colors.red} />
            <Text style={{ color: colors.red }}>Logout</Text>
          </TouchableOpacity>
        </>
      )}
    </View>
  )
}

AvgCycle = () => {
  const navigation = useNavigation();
  const [userAverageCycle, setUserAverageCycle] = React.useState(0);

  const saveAvgPeriod = async () => {
    try {
      await AsyncStorage.setItem('AvgPeriod', JSON.stringify(userAverageCycle));
    } catch (error) {
      console.log(error);
    }

    navigation.navigate('LastPeriod', { prevScreen: 'AverageCycle' });
  };

  return (
    <View style={{ backgroundColor: '#fff', flex: 1 }}>
      <Image source={top} style={styles.top} />
      <View style={[{ flexDirection: 'row' }, styles.cycleText]}>
        <Text
          style={[{ fontFamily: 'PT-Sans', fontSize: 30, fontWeight: 'bold', alignSelf: 'center' }]}
        ></Text>
        <Text style={{ fontSize: 25, fontFamily: 'PT-Sans', marginTop: 8 }}>
          {i18n.t('how_long_is_your_cycle')}
        </Text>
      </View>
      <View style={styles.wrapperHorizontal}>
        <StatusBar hidden />
        <SmoothPicker
          initialScrollToIndex={userAverageCycle + 1}
          ref={ref => (this.refList = ref)}
          keyExtractor={(_, index) => index.toString()}
          horizontal={true}
          showsHorizontalScrollIndicator={false}
          bounces={true}
          data={Array.from({ length: 40 }, (_, i) => 1 + i)}
          onSelected={({ index }) => setUserAverageCycle(index)}
          renderItem={({ item, index }) => (
            <Bubble horizontal selected={++index === userAverageCycle + 1}>
              {item}
            </Bubble>
          )}
        />
      </View>
      <TouchableOpacity style={styles.button} onPress={saveAvgPeriod}>
        <Text style={styles.buttonText}>{i18n.t('continue')}</Text>
        <AntDesign
          style={{ alignSelf: 'center', color: '#F55963', top: 2, left: -4 }}
          name="arrowright"
          size={18}
        />
      </TouchableOpacity>
    </View>
  );
}

ChatListItem = (props) => {
    const { user } = props;

    const [isLoading, setIsLoading] = useState(false);

    const loggedInUserId = useSelector(state => state.auth.user._id);
    const allUsers = useSelector(state => state.users.allUsers);
    const loggedInUser = allUsers.filter(u => u._id === loggedInUserId)[0];
    // currUser following list

    const dispatch = useDispatch();
    const navigation = useNavigation();





    // check user._id is in following list

    const [imageUri, setImageUri] = useState(`${ENV.apiUrl}/user/photo/${user._id}`);


    const onImageErrorHandler = () => {
        setImageUri(ENV.defaultImageUri)
    }

    return (
        <TouchableOpacity
            onPress={() => navigation.navigate('Chat', { user: user })}
        >
            <View style={styles.container}>
                <Image
                    source={{ uri: imageUri }}
                    onError={onImageErrorHandler}
                    style={styles.avatar}
                />
                <View style={styles.content}>
                    <View style={styles.mainContent}>
                        <View style={styles.text}>
                            <Text
                                style={styles.name}
                            >
                                {user.name + " "}
                                {
                                    VerifiedUser.verifiedUsersId.includes(user._id) && <Octicons name="verified" size={18} color={Colors.brightBlue} />
                                }
                            </Text>
                        </View>
                        <Text style={styles.timeAgo}>
                            {user.email}
                        </Text>
                    </View>
                </View>
            </View>
        </TouchableOpacity>
    );
}

Note = ({
  resourceId,
  note,
  deleteNoteAction,
  handleEditNote,
  fromNotesScreen,
  editNoteId,
  isCollectionNotes,
}) => {
  const navigation = useNavigation();
  const displayDate = formatDateTime(note.dateCreated);
  const handleDelete = () => Alert.alert(
    'Delete Note',
    'Are you sure you want to delete this note?',
    [
      {
        text: 'Cancel',
        onPress: () => {},
        style: 'cancel',
      },
      {
        text: 'Delete',
        onPress: deleteNoteAction,
        style: 'destructive',
      },
    ],
  );

  const hasBeenEdited = note.dateCreated !== note.dateEdited;
  const displayEdited = hasBeenEdited ? ' (Edited)' : '';
  const isEditing = note.id === editNoteId;
  const editingStyle = isEditing ? styles.editing : {};

  const handleEdit = () => {
    if (fromNotesScreen) {
      handleEditNote(note.id, note.text);
    } else {
      navigation.navigate('Notes', { resourceId, editingNote: { id: note.id, text: note.text } });
    }
  };

  const noteTextContainerStyles = [styles.noteTextContainer];

  if (isCollectionNotes) {
    noteTextContainerStyles.push(styles.collectionNoteTextContainer);
  }

  return (
    <View style={[styles.noteContainer, editingStyle]}>
      <View style={styles.noteContent}>
        <View style={styles.headerContainer}>
          <Text style={styles.headerText}>
            {displayDate}
            <Text style={styles.editedText}>{displayEdited}</Text>
          </Text>
          <View style={styles.actionsContainer}>
            <TouchableOpacity onPress={handleEdit}>
              <Text style={[styles.headerText, styles.headerActions]}>
                Edit
              </Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={handleDelete}>
              <Text style={[styles.headerText, styles.headerActions, styles.deleteText]}>
                Delete
              </Text>
            </TouchableOpacity>
          </View>
        </View>
        <View style={noteTextContainerStyles}>
          <Text>{note.text}</Text>
        </View>
      </View>
    </View>
  );
}

Item = ({ item }) => {
  const { id, name, startTime, endTime, tags, avatar } = item;
  const navigation = useNavigation();
  const isTablet = DeviceInfo.isTablet();

  const dispatch = useDispatch();
  const onSelected = () => {
    dispatch(appointmentActions.appointmentSelected(id));
    if (!isTablet) {
      navigation.navigate('AppointmentDetail');
    }
  };

  return (
    <Card style={styles.card}>
      <ProfileCard name={name} avatar={avatar} onSelected={onSelected} />
      <Card.Content>
        <Divider />
        <Text style={styles.duration}>
          {startTime} - {endTime}
        </Text>
        <View style={styles.tags}>
          {tags.map((itx, i) => {
            const { labelColor, buttonColor } = random_rgba();
            return (
              <Button
                key={i}
                mode="contained"
                disabled
                compact
                uppercase={false}
                style={[styles.tag, { backgroundColor: buttonColor }]}
                labelStyle={[styles.tagLabel, { color: labelColor }]}>
                {itx}
              </Button>
            );
          })}
        </View>
      </Card.Content>
    </Card>
  );
}