@expo/vector-icons#Feather TypeScript Examples

export default function Header({ title, showCancel = true }: HeaderProps) {
  const navigation = useNavigation();

  function handleGoBackToAppHomePage() {
    navigation.navigate('OrphanagesMap');
  }

  return (
    <View style={styles.container}>
      <BorderlessButton onPress={navigation.goBack}>
        <Feather name="arrow-left" size={24} color="#15b6d6" />
      </BorderlessButton>

      <Text style={styles.title}>{title}</Text>

      {showCancel ? (
        <BorderlessButton onPress={handleGoBackToAppHomePage}>
          <Feather name="x" size={24} color="#ff669d" />
        </BorderlessButton>
      ) : (
        <View />
      )}
    </View>
  );
}

HeaderComponent: React.FC<IHeaderProps> = ({ title, showCancel = true }: IHeaderProps) => {
    const navigation = useNavigation();

    function handleGoHomePage() {
        navigation.navigate('OrphanagesMap');
    }

    return (
        <Container>
            <BackButton onPress={navigation.goBack}>
                <Feather name="arrow-left" size={24} color="#15B6D6" />
            </BackButton>
            <Title>
                {title}
            </Title>

            { showCancel ?
                (
                    <CloseButton onPress={handleGoHomePage}>
                        <Feather name="x" size={24} color="#FF669D" />
                    </CloseButton>
                ) : (
                    <View />
                )
            }
        </Container>
    );
}

Inbox: React.FC = () => {
  return (
    <Container>
      <Header>
        <Title>All activity</Title>
        <MaterialIcons name="arrow-drop-down" size={24} color="black" />
        <Feather
          style={{ position: 'absolute', right: 10, top: 10 }}
          name="send"
          size={24}
          color="black"
        />
      </Header>
    </Container>
  );
}

export default function Header({ showCancel = true, title, navigation }: HeaderProps) {
  function handleCancelCreateOrphanage() {
    navigation.navigate('OrphanagesMap');
  }

  return (
    <View style={styles.container}>
      <BorderlessButton onPress={navigation.goBack}>
        <Feather name="arrow-left" size={24} color="#15B6D6" />
      </BorderlessButton>

      <Text style={styles.title}>{title}</Text>

      { showCancel
        ? (
          <BorderlessButton onPress={handleCancelCreateOrphanage}>
            <Feather name="x" size={24} color="#FF669D" />
          </BorderlessButton>
        )
        : (
          <View />
        ) }
    </View>
  );
}

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

  const [uf, setUf] = useState('');
  const [city, setCity] = useState('');

  function handleNavigateToPoints() {
    navigation.navigate('Points', {
      uf,
      city,
    });
  }

  return (
    <KeyboardAvoidingView
      style={{ flex: 1, marginBottom: 25 }}
      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
    >
      <ImageBackground
        style={styles.container}
        source={require('../../assets/home-background.png')}
        imageStyle={{ width: 274, height: 368 }}
      >
        <View style={styles.main}>
          <Image source={require('../../assets/logo.png')} />

          <View>
            <Text style={styles.title}>
              Seu marketplace de coleta de resíduos
            </Text>
            <Text style={styles.description}>
              Ajudamos pessoas a encontrarem pontos de coleta de forma
              eficiente.
            </Text>
          </View>
        </View>

        <View style={styles.footer}>
          <TextInput
            style={styles.input}
            placeholder="Digite a UF"
            value={uf}
            onChangeText={setUf}
            maxLength={2}
            autoCorrect={false}
            autoCapitalize="characters"
          />

          <TextInput
            style={styles.input}
            placeholder="Digite a cidade"
            value={city}
            onChangeText={setCity}
            autoCorrect={false}
          />

          <RectButton style={styles.button} onPress={handleNavigateToPoints}>
            <View style={styles.buttonIcon}>
              <Feather name="arrow-right" color="#fff" size={24} />
            </View>
            <Text style={styles.buttonText}>Entrar</Text>
          </RectButton>
        </View>
      </ImageBackground>
    </KeyboardAvoidingView>
  );
}

export default function OrphanagesMap() {
  const [orphanages, setOrphanages] = useState<Orphanage[]>([]);
  const navigation = useNavigation();

  useFocusEffect(
    useCallback(() => {
      api.get('orphanages').then(response => {
        setOrphanages(response.data);
      });
    }, [])
  );

  function handleNavigateToOphanageDetails(id: number) {
    navigation.navigate('OrphanageDetails', { id })
  }

  function handleNavigateToOrphanage() {
    navigation.navigate('SelectMapPosition')
  }

  return (
    <View style={styles.container}>
      <MapView
        provider={PROVIDER_GOOGLE}
        style={styles.map}
        initialRegion={{
          latitude: -27.2092052,
          longitude: -49.6401092,
          latitudeDelta: 0.008,
          longitudeDelta: 0.008,
        }}
      >
        {orphanages.map(orphanage => (
          <Marker
            key={orphanage.id}
            icon={mapMarker}
            calloutAnchor={{
              x: 2.7,
              y: 0.8,
            }}
            coordinate={{
              latitude: orphanage.latitude,
              longitude: orphanage.longitude,
            }}
          >
            <Callout tooltip onPress={() => handleNavigateToOphanageDetails(orphanage.id)}>
              <View style={styles.calloutContainer}>
                <Text style={styles.calloutText}>{orphanage.name}</Text>
              </View>
            </Callout>
          </Marker>
        ))}
      </MapView>

      <View style={styles.footer}>
        <Text style={styles.footerText}>{orphanages.length} orfanatos encontrados</Text>

        <RectButton style={styles.createOrphanageButton} onPress={handleNavigateToOrphanage}>
          <Feather name="plus" size={20} color="#fff" />
        </RectButton>
      </View>
    </View>
  );
}

Detail = () => {
  const [data, setData] = useState<Data>({} as Data);

  const navigation = useNavigation();
  const route = useRoute();

  const routeParams = route.params as Params;

  useEffect(() => {
    api.get(`/points/${routeParams.point_id}`).then((response) => {
      setData(response.data);
    });
  }, []);

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

  function handleWhatsapp() {
    Linking.openURL(
      `whatsapp://send?phone=${data.point.whatsapp}&text=Tenho interesse em ajudar na coleta de resíduos`
    );
  }

  function handleComposeMail() {
    MailComposer.composeAsync({
      subject: 'Interesse na coleta de resíduos',
      recipients: [data.point.email],
    });
  }

  if (!data.point) {
    return null;
  }
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.container}>
        <TouchableOpacity onPress={handleNavigateBack}>
          <Feather name="arrow-left" color="#34CB79" size={24} />
        </TouchableOpacity>

        <Image
          style={styles.pointImage}
          source={{
            uri: data.point.image_url,
          }}
        />
        <Text style={styles.pointName}>{data.point.name}</Text>
        <Text style={styles.pointItems}>
          {data.items.map((item) => item.title).join(', ')}
        </Text>

        <View style={styles.address}>
          <Text style={styles.addressTitle}>Endereço:</Text>
          <Text style={styles.addressContent}>
            {data.point.city}, {data.point.uf}
          </Text>
        </View>
      </View>

      <View style={styles.footer}>
        <RectButton style={styles.button} onPress={handleWhatsapp}>
          <FontAwesome name="whatsapp" size={20} color="#fff" />
          <Text style={styles.buttonText}>Whatsapp</Text>
        </RectButton>

        <RectButton style={styles.button} onPress={handleComposeMail}>
          <Feather name="mail" size={20} color="#fff" />
          <Text style={styles.buttonText}>E-mail</Text>
        </RectButton>
      </View>
    </SafeAreaView>
  );
}

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

  function handleNavigateToCreateOrphanage() {
    navigation.navigate('SelectMapPosition');
  }

  function handleNavigateToOrphanageDetails() {
    navigation.navigate('OrphanageDetails');
  }

  return (
    <View style={styles.container}>
      <MapView 
        provider={PROVIDER_GOOGLE}
        initialRegion={{
          latitude: -27.2092052,
          longitude: -49.6401092,
          latitudeDelta: 0.008,
          longitudeDelta: 0.008,
        }} 
        style={styles.mapStyle}
      >
        <Marker 
          icon={mapMarkerImg}
          calloutAnchor={{ x: 2.7, y: 0.8 }}
          coordinate={{ 
            latitude: -27.2092052,
            longitude: -49.6401092
          }}
        >
          <Callout tooltip={true} onPress={handleNavigateToOrphanageDetails}>
            <View style={styles.calloutContainer}>
              <Text style={styles.calloutText}>Lar das meninas</Text>
            </View>
          </Callout>
        </Marker>
      </MapView>

      <View style={styles.footer}>
        <Text style={styles.footerText}>2 orfanatos encontrados</Text>
        <RectButton style={styles.createOrphanage} onPress={handleNavigateToCreateOrphanage}>
          <Feather name="plus" size={20} color="#FFF" />
        </RectButton>
      </View>
    </View>
  );
}

export default function OrphanageDetails() {
  return (
    <ScrollView style={styles.container}>
      <View style={styles.imagesContainer}>
        <ScrollView horizontal pagingEnabled>
          <Image style={styles.image} source={{ uri: 'https://fmnova.com.br/images/noticias/safe_image.jpg' }} />
          <Image style={styles.image} source={{ uri: 'https://fmnova.com.br/images/noticias/safe_image.jpg' }} />
          <Image style={styles.image} source={{ uri: 'https://fmnova.com.br/images/noticias/safe_image.jpg' }} />
        </ScrollView>
      </View>

      <View style={styles.detailsContainer}>
        <Text style={styles.title}>Orf. Esperança</Text>
        <Text style={styles.description}>Presta assistência a crianças de 06 a 15 anos que se encontre em situação de risco e/ou vulnerabilidade social.</Text>
      
        <View style={styles.mapContainer}>
          <MapView 
            initialRegion={{
              latitude: -27.2092052,
              longitude: -49.6401092,
              latitudeDelta: 0.008,
              longitudeDelta: 0.008,
            }} 
            zoomEnabled={false}
            pitchEnabled={false}
            scrollEnabled={false}
            rotateEnabled={false}
            style={styles.mapStyle}
          >
            <Marker 
              icon={mapMarkerImg}
              coordinate={{ 
                latitude: -27.2092052,
                longitude: -49.6401092
              }}
            />
          </MapView>

          <View style={styles.routesContainer}>
            <Text style={styles.routesText}>Ver rotas no Google Maps</Text>
          </View>
        </View>
      
        <View style={styles.separator} />

        <Text style={styles.title}>Instruções para visita</Text>
        <Text style={styles.description}>Venha como se sentir a vontade e traga muito amor e paciência para dar.</Text>

        <View style={styles.scheduleContainer}>
          <View style={[styles.scheduleItem, styles.scheduleItemBlue]}>
            <Feather name="clock" size={40} color="#2AB5D1" />
            <Text style={[styles.scheduleText, styles.scheduleTextBlue]}>Segunda à Sexta 8h às 18h</Text>
          </View>
          <View style={[styles.scheduleItem, styles.scheduleItemGreen]}>
            <Feather name="info" size={40} color="#39CC83" />
            <Text style={[styles.scheduleText, styles.scheduleTextGreen]}>Atendemos fim de semana</Text>
          </View>
        </View>

        <RectButton style={styles.contactButton} onPress={() => {}}>
          <FontAwesome name="whatsapp" size={24} color="#FFF" />
          <Text style={styles.contactButtonText}>Entrar em contato</Text>
        </RectButton>
      </View>
    </ScrollView>
  )
}

OrphanagesMap: React.FC = () => {
    const navigation = useNavigation();

    const [orphanages, setOrphanages] = useState<IOrphanage[]>([]);

    // Sempre que o usuário sair e voltar para a tela o useFocusEffect é disparado
    useFocusEffect(() => {
        api.get('/orphanages').then(res => {
            setOrphanages(res.data);
        });
    });

    function handleNavigateToOrphanage(id: number) {
        navigation.navigate('Orphanage', { id });
    }

    function handleNavigateToCreateOrphanage() {
        navigation.navigate('SelectMapPosition');
    }

    return (
        <MapContainer>
            <Map
                provider={PROVIDER_GOOGLE}
                initialRegion={{
                    latitude: -5.8026889,
                    longitude: -35.2224104,
                    latitudeDelta: 0.060,
                    longitudeDelta: 0.060,
                }}
            >
                {orphanages.map(orphanage => {
                    return (
                        <Marker
                            key={orphanage.id}
                            icon={mapMarker}
                            calloutAnchor={{
                                x: 2.7,
                                y: 0.8,
                            }}
                            coordinate={{
                                latitude: orphanage.latitude,
                                longitude: orphanage.longitude,
                            }}
                        >
                            <Callout tooltip onPress={() => handleNavigateToOrphanage(orphanage.id)}>
                                <CalloutContainer>
                                    <CalloutText>{orphanage.name}</CalloutText>
                                </CalloutContainer>
                            </Callout>
                        </Marker>
                    );
                })}
            </Map>

            <Footer>
                <FooterText>{orphanages.length} orfanatos encontrados</FooterText>

                <CreateOtphanageButton onPress={handleNavigateToCreateOrphanage}>
                    <Feather name="plus-circle" size={20} color="#FFF" />
                </CreateOtphanageButton>
            </Footer>
        </MapContainer>
    );
}

Bookmark = styled(Feather)`
  border-width: 1.5px;
  padding: 5px;
  margin-left: 5px;
  border-color: #e6e6e6;
  border-radius: 2px;
`

export default function MultiSelect(props: Props): React.ReactElement {
  const { handleSelect, items } = props
  const [open, setOpen] = React.useState(false)
  const [selected, setSelected] = React.useState<string[]>([])

  const handlePress = (id: string): void => {
    let sel = [...selected]

    if (sel.includes(id)) {
      sel = selected.filter((i) => i !== id)
    } else {
      sel = [...selected, id]
    }

    setSelected(sel)
    handleSelect(sel)
  }

  return (
    <View>
      <Modal isVisible={open} onBackdropPress={(): void => setOpen(false)} testID="modal">
        <ScrollView style={styles.scroll}>
          {
            items.map((c) => (
              <View key={c.id} style={styles.item}>
                <TouchableOpacity
                  accessibilityRole="button"
                  onPress={(): void => handlePress(c.id)}
                >
                  <Text
                    style={{
                      ...styles.itemText,
                      color: selected.includes(c.id) ? 'black' : '#808080',
                    }}
                  >
                    {c.name}
                  </Text>
                </TouchableOpacity>
                {
                  selected.includes(c.id)
                    && <Feather name="check" size={20} color="black" />
                }
              </View>
            ))
          }
        </ScrollView>
      </Modal>
      <TouchableOpacity
        accessibilityRole="button"
        style={styles.openButton}
        onPress={(): void => setOpen(true)}
      >
        <Text style={styles.openText}>
          { selected.length
            ? `${selected.length} ${selected.length === 1 ? 'category' : 'categories'} selected`
            : 'Filter by Categories (Optional)'}
        </Text>
        <MaterialIcons name="arrow-right" size={26} />
      </TouchableOpacity>
    </View>
  )
}

Points = () => {
  const navigation = useNavigation();
  const route = useRoute();

  const routeParams = route.params as Params;

  const [initialPosition, setInitialPosition] = useState<[number, number]>([
    0,
    0,
  ]);

  const [items, setItems] = useState<Item[]>([]);
  const [points, setPoints] = useState<Point[]>([]);
  const [selectedItems, setSelectedItems] = useState<number[]>([]);

  useEffect(() => {
    async function loadPosition() {
      const { status } = await Location.requestPermissionsAsync();

      if (status !== 'granted') {
        Alert.alert(
          'Oops!',
          'Precisamos da sua permissão para obter a localização'
        );
        return;
      }

      const location = await Location.getCurrentPositionAsync();

      const { latitude, longitude } = location.coords;

      setInitialPosition([latitude, longitude]);
    }

    loadPosition();
  }, []);

  useEffect(() => {
    api
      .get('/points', {
        params: {
          city: routeParams.city,
          uf: routeParams.uf,
          items: selectedItems,
        },
      })
      .then((response) => {
        setPoints(response.data);
      });
  }, [selectedItems]);

  useEffect(() => {
    api.get('/items').then((response) => {
      setItems(response.data);
    });
  }, []);

  function handleSelectItem(id: number) {
    const alreadySelected = selectedItems.findIndex((item) => item === id);

    if (alreadySelected >= 0) {
      const filteredItems = selectedItems.filter((item) => item !== id);

      setSelectedItems(filteredItems);
    } else {
      setSelectedItems([...selectedItems, id]);
    }
  }

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

  function handleNavigateToDetail(id: number) {
    navigation.navigate('Detail', { point_id: id });
  }

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={styles.container}>
        <TouchableOpacity onPress={handleNavigateBack}>
          <Feather name="arrow-left" color="#34CB79" size={24} />
        </TouchableOpacity>

        <Text style={styles.title}>Bem vindo</Text>
        <Text style={styles.description}>
          Encontre no mapa um pronto de coleta.
        </Text>

        <View style={styles.mapContainer}>
          {initialPosition[0] !== 0 && (
            <MapView
              style={styles.map}
              loadingEnabled={initialPosition[0] === 0}
              initialRegion={{
                latitude: initialPosition[0],
                longitude: initialPosition[1],
                latitudeDelta: 0.014,
                longitudeDelta: 0.014,
              }}
            >
              {points.map((point) => (
                <Marker
                  key={String(point.id)}
                  style={styles.mapMarker}
                  onPress={() => handleNavigateToDetail(point.id)}
                  coordinate={{
                    latitude: point.latitude,
                    longitude: point.longitude,
                  }}
                >
                  <View style={styles.mapMarkerContainer}>
                    <Image
                      style={styles.mapMarkerImage}
                      source={{
                        uri: point.image_url,
                      }}
                    />
                    <Text style={styles.mapMarkerTitle}>{point.name}</Text>
                  </View>
                </Marker>
              ))}
            </MapView>
          )}
        </View>
      </View>

      <View style={styles.itemsContainer}>
        <ScrollView
          horizontal
          showsHorizontalScrollIndicator={false}
          contentContainerStyle={{ paddingHorizontal: 20 }}
        >
          {items.map((item) => (
            <TouchableOpacity
              key={String(item.id)}
              style={[
                styles.item,
                selectedItems.includes(item.id) ? styles.selectedItem : {},
              ]}
              onPress={() => handleSelectItem(item.id)}
              activeOpacity={0.6}
            >
              <SvgUri width={42} height={42} uri={item.image_url} />
              <Text style={styles.itemTitle}>{item.title}</Text>
            </TouchableOpacity>
          ))}
        </ScrollView>
      </View>
    </SafeAreaView>
  );
}

export function AddTransactionScreen(props: Props): JSX.Element {
  const Keys = [
    { display: "1", value: 1 },
    { display: "2", value: 2 },
    { display: "3", value: 3 },
    { display: "4", value: 4 },
    { display: "5", value: 5 },
    { display: "6", value: 6 },
    { display: "7", value: 7 },
    { display: "8", value: 8 },
    { display: "9", value: 9 },
    { display: "Del", value: 100 },
    { display: "0", value: 0 },
    { display: i18n.t("next"), value: 200 },
  ];

  React.useEffect(() => {
    async function init() {
      await analytics.track("page_view_add_transaction", {});
    }
    init();
  }, []);
  const theme = useTheme().colorTheme;
  const styles = getStyles(theme);
  const [currentMoney, setCurrentMoney] = React.useState("0.00");
  const [keyValues, setKeyValues] = React.useState<Array<number>>([]);

  let currentAsset = "";
  let currentExpense = "";
  const [currentCurrency, setCurrentCurrency] = React.useState("");

  const onChange = ({
    asset,
    expense,
    currency,
  }: {
    asset: string;
    expense: string;
    currency: string;
  }) => {
    currentAsset = asset;
    currentExpense = expense;
    setCurrentCurrency(currency);
  };

  const getMoneyByKeyValues = (values: Array<number>) => {
    let money = "0.00";
    if (values.length > 0) {
      let moneyTmp = values.map((v) => String(v)).join("");
      if (moneyTmp.length === 1) {
        moneyTmp = `00${moneyTmp}`;
      }
      if (moneyTmp.length === 2) {
        moneyTmp = `0${moneyTmp}`;
      }
      money = `${moneyTmp.slice(0, moneyTmp.length - 2)}.${moneyTmp.slice(
        moneyTmp.length - 2
      )}`;
    }
    return money;
  };
  const { onRefresh } = props.route.params;

  const currencySymbol = getCurrencySymbol(currentCurrency);
  return (
    <View style={styles.container}>
      <NavigationBar
        title={i18n.t("addTransaction")}
        showBack
        navigation={props.navigation}
      />
      <SafeAreaView style={styles.container}>
        <View style={styles.containerCenter}>
          <Text
            style={styles.txtMoney}
          >{`${currencySymbol}${currentMoney}`}</Text>
        </View>
        <QuickAddAccountsSelector
          navigation={props.navigation}
          onChange={onChange}
        />
        <View style={{ flexDirection: "row", flexWrap: "wrap" }}>
          {Keys.map((key) => {
            return (
              <Button
                key={key.value}
                style={[
                  styles.keyButton,
                  {
                    backgroundColor:
                      key.display === i18n.t("next")
                        ? theme.primary
                        : theme.black10,
                  },
                ]}
                onPress={async () => {
                  if (key.display === "Del" && keyValues.length > 0) {
                    keyValues.pop();
                  } else if (key.value < 10) {
                    if (key.display === "0" && keyValues.length > 0) {
                      keyValues.push(0);
                    } else if (key.value > 0) {
                      keyValues.push(key.value);
                    }
                  }
                  setCurrentMoney(getMoneyByKeyValues(keyValues));
                  setKeyValues(keyValues);

                  if (key.display === i18n.t("next")) {
                    if (currentMoney === "0.00") {
                      Toast.show(i18n.t("amountEmptyError"));
                      return;
                    }
                    await analytics.track("tap_add_transaction_next", {
                      money: currentMoney,
                    });
                    props.navigation.replace("AddTransactionNext", {
                      currentMoney,
                      currentAsset,
                      currentExpense,
                      currentCurrency,
                      onRefresh,
                    });
                  }
                }}
              >
                {key.display === "Del" ? (
                  <Feather name="delete" size={20} color={theme.black} />
                ) : (
                  <Text
                    style={[
                      styles.keyLabel,
                      {
                        color:
                          key.display === i18n.t("next")
                            ? theme.white
                            : theme.black,
                      },
                    ]}
                  >
                    {key.display}
                  </Text>
                )}
              </Button>
            );
          })}
        </View>
      </SafeAreaView>
    </View>
  );
}

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

  const [open_on_weekends, setOpenOnWeekends] = useState(false);

  const params = route.params as OrphanageDataRouteParams;
  const position = params.position;

  function handleCreateOrphanage() {
    // todo
  }

  async function handleSelectImages() {
    const { status } = await ImagePicker.requestCameraRollPermissionsAsync();

    if (status !== 'granted') {
      alert('Eita! Precisamos de acesso às suas fotos...');
    }

    const result = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      quality: 1,
    });

    console.log(result);
  }

  return (
    <ScrollView style={styles.container} contentContainerStyle={{ padding: 24 }}>
      <Text style={styles.title}>Dados</Text>

      <Text style={styles.label}>Nome</Text>
      <TextInput
        style={styles.input}
      />

      <Text style={styles.label}>Sobre</Text>
      <TextInput
        style={[styles.input, { height: 110 }]}
        multiline
      />

      <Text style={styles.label}>Whatsapp</Text>
      <TextInput
        style={styles.input}
      />

      <Text style={styles.label}>Fotos</Text>
      <TouchableOpacity style={styles.imagesInput} onPress={handleSelectImages}>
        <Feather name="plus" size={24} color="#15B6D6" />
      </TouchableOpacity>

      <Text style={styles.title}>Visitação</Text>

      <Text style={styles.label}>Instruções</Text>
      <TextInput
        style={[styles.input, { height: 110 }]}
        multiline
      />

      <Text style={styles.label}>Horario de visitas</Text>
      <TextInput
        style={styles.input}
      />

      <View style={styles.switchContainer}>
        <Text style={styles.label}>Atende final de semana?</Text>
        <Switch 
          thumbColor="#fff" 
          trackColor={{ false: '#ccc', true: '#39CC83' }}
          value={open_on_weekends}
          onValueChange={setOpenOnWeekends}
        />
      </View>

      <RectButton style={styles.nextButton} onPress={handleCreateOrphanage}>
        <Text style={styles.nextButtonText}>Cadastrar</Text>
      </RectButton>
    </ScrollView>
  )
}

function TeacherList() {
  const [teachers, setTeachers] = useState([]);
  const [favorites, setFavorites] = useState<number[]>([]);
  const [isFiltersVisible, setIsFiltersVisible] = useState(false);

  const [subject, setSubject] = useState('');
  const [week_day, setWeekDay] = useState('');
  const [time, setTime] = useState('');

  function loadFavorites() {
    AsyncStorage.getItem('favorites').then(response => {
      if (response) {
        const favoritedTeachers = JSON.parse(response);
        const favoritedTeachersIds = favoritedTeachers.map((teacher: Teacher) => {
          return teacher.id;
        })

        setFavorites(favoritedTeachersIds);
      }
    });
  }

  useFocusEffect(() => {
    loadFavorites();
  });

  function handleToggleFiltersVisible() {
    setIsFiltersVisible(!isFiltersVisible);
  }

  async function handleFiltersSubmit() {
    loadFavorites();

    const response = await api.get('classes', {
      params: {
        subject,
        week_day,
        time,
      }
    });

    setIsFiltersVisible(false);
    setTeachers(response.data);
  }

  return (
    <View style={styles.container}>
      <PageHeader 
        title="Proffys disponíveis" 
        headerRight={(
          <BorderlessButton onPress={handleToggleFiltersVisible}>
            <Feather name="filter" size={20} color="#FFF" />
          </BorderlessButton>
        )}
      >
        { isFiltersVisible && (
          <View style={styles.searchForm}>
            <Text style={styles.label}>Matéria</Text>
            <TextInput
              style={styles.input}
              value={subject}
              onChangeText={text => setSubject(text)}
              placeholder="Qual a matéria?"
              placeholderTextColor="#c1bccc"
            />

            <View style={styles.inputGroup}>
              <View style={styles.inputBlock}>
                <Text style={styles.label}>Dia da semana</Text>
                <TextInput
                  style={styles.input}
                  value={week_day}
                  onChangeText={text => setWeekDay(text)}
                  placeholder="Qual o dia?"
                  placeholderTextColor="#c1bccc"
                />
              </View>

              <View style={styles.inputBlock}>
                <Text style={styles.label}>Horário</Text>
                <TextInput
                  style={styles.input}
                  value={time}
                  onChangeText={text => setTime(text)}
                  placeholder="Qual horário?"
                  placeholderTextColor="#c1bccc"
                />
              </View>
            </View>

            <RectButton onPress={handleFiltersSubmit} style={styles.submitButton}>
              <Text style={styles.submitButtonText}>Filtrar</Text>
            </RectButton>
          </View>
        )}          
      </PageHeader>

      <ScrollView
        style={styles.teacherList}
        contentContainerStyle={{
          paddingHorizontal: 16,
          paddingBottom: 16,
        }}
      >
        {teachers.map((teacher: Teacher) => {
          return (
            <TeacherItem 
              key={teacher.id} 
              teacher={teacher}
              favorited={favorites.includes(teacher.id)}
            />
          )
        })}
      </ScrollView>
    </View>
  );
}

OrphanageData: React.FC = () => {
    const route = useRoute();
    // console.log(route.params);
    const params = route.params as IRouteParams;

    const navigation = useNavigation();

    // Campos do formulário
    const [name, setName] = useState('');
    const [about, setAbout] = useState('');
    const [instructions, setInstructions] = useState('');
    const [opening_hours, setOpeningHours] = useState('');
    const [open_on_weekends, setOpenOnWeekends] = useState(false);
    const [images, setImages] = useState<string[]>([]);

    async function handleCreateOrphanage() {
        const { latitude, longitude } = params.position;

        // console.log({
        //     name,
        //     latitude,
        //     longitude,
        //     about,
        //     instructions,
        //     opening_hours,
        //     open_on_weekends,
        // });

        const data = new FormData();

        data.append('name', name);
        data.append('about', about);
        data.append('latitude', String(latitude));
        data.append('longitude', String(longitude));
        data.append('instructions', instructions);
        data.append('opening_hours', opening_hours);
        data.append('open_on_weekends', String(open_on_weekends));

        images.forEach((image, index) => {
            data.append('images', {
                name: `image_${index}.jpg`,
                type: 'image/jpg',
                uri: image,
            } as any);
        });

        await api.post('/orphanages', data);

        navigation.navigate('OrphanagesMap');
    }

    // Função para pegar as imagens
    async function handleSelectImages() {
        // Pegando a permissão do usuário para acessar a galeria de fotos dele
        const { status } = await ImagePicker.requestCameraRollPermissionsAsync();

        // Verificando se o usuário permitiu ou não
        if (status !== 'granted') {
            alert('Eita libera aí para acessar as suas fotos!');
            return;
        }

        const result = await ImagePicker.launchImageLibraryAsync({
            allowsEditing: true,
            quality: 1,
            // Pegando apenas imagens e não vídeos
            mediaTypes: ImagePicker.MediaTypeOptions.Images,
        });
        // console.log(result);

        // Caso o usuário cancele o upload da imagem
        if (result.cancelled) {
            return;
        }

        const { uri } = result;
        // Respeitar o array de imagens
        setImages([...images, uri]);
    }

    return (
        <Container contentContainerStyle={{ padding: 24 }}>
            <Title>Dados</Title>

            <Label>Nome</Label>
            <Input
                value={name}
                onChangeText={setName}
            />

            <Label>Sobre</Label>
            <Input
                style={[{ height: 110 }]}
                multiline
                value={about}
                onChangeText={setAbout}
            />

            {/* <Label>Whatsapp</Label>
            <Input /> */}

            <Label>Fotos</Label>
            <UploadedImagesContainer>
                {images.map(image => {
                    return (
                        <UploadedImage
                            key={image}
                            source={{ uri: image }}
                        />
                    );
                })}
            </UploadedImagesContainer>
            <InputImageButton onPress={handleSelectImages}>
                <Feather name="plus" size={24} color="#15B6D6" />
            </InputImageButton>

            <Title>Visitação</Title>

            <Label>Instruções</Label>
            <Input
                style={[{ height: 110 }]}
                multiline
                value={instructions}
                onChangeText={setInstructions}
            />

            <Label>Horario de visitas</Label>
            <Input
                value={opening_hours}
                onChangeText={setOpeningHours}
            />

            <SwitchContainer>
                <Label>Atende final de semana?</Label>
                <Switch
                    thumbColor="#fff"
                    trackColor={{ false: '#ccc', true: '#39CC83' }}
                    value={open_on_weekends}
                    onValueChange={setOpenOnWeekends}
                />
            </SwitchContainer>

            <NextButton onPress={handleCreateOrphanage}>
                <NextButtonText>Cadastrar</NextButtonText>
            </NextButton>
        </Container>
    );
}

OrphanageDetails: React.FC = () => {
    const route = useRoute();
    // console.log(route.params);
    const [orphanage, setOrphanage] = useState<IOpharnage>();

    // Forçando o params a ter o formato da interface
    const params = route.params as IRouteParams;

    useEffect(() => {
        api.get(`/orphanages/${params.id}`).then(res => {
            setOrphanage(res.data);
        });
    }, [params.id]);

    // Fazer tela de loading
    if (!orphanage) {
        return (
            <View>
                <Text>Carregando...</Text>
            </View>
        );
    }

    // Abrindo o endereço no Google Maps
    function handleOpenGoogleMapRoutes() {
        Linking.openURL(`https://www.google.com/maps/dir/?api=1&destination=${orphanage?.latitude},${orphanage?.longitude}`);
    }

    return (
        <Container>
            <ImagesContainer>
                <ScrollView horizontal pagingEnabled>
                    {orphanage.images.map(image => {
                        return (
                            <OrphanageImage
                                key={image.id}
                                source={{ uri: image.url }}
                            />
                        );
                    })}
                </ScrollView>
            </ImagesContainer>

            <DetailsContainer>
                <Title>{orphanage.name}</Title>
                <Description>{orphanage.about}</Description>

                <MapContainer>
                    <Map
                        initialRegion={{
                            latitude: orphanage.latitude,
                            longitude: orphanage.longitude,
                            latitudeDelta: 0.008,
                            longitudeDelta: 0.008,
                        }}
                        zoomEnabled={false}
                        pitchEnabled={false}
                        scrollEnabled={false}
                        rotateEnabled={false}
                    >
                        <Marker
                            icon={mapMarkerImg}
                            coordinate={{
                                latitude: orphanage.latitude,
                                longitude: orphanage.longitude,
                            }}
                        />
                    </Map>

                    <RoutesButtonContainer onPress={handleOpenGoogleMapRoutes}>
                        <RoutesText>Ver rotas no Google Maps</RoutesText>
                    </RoutesButtonContainer>
                </MapContainer>

                <Separator />

                <Title>Instruções para visita</Title>
                <Description>{orphanage.instructions}</Description>

                <ScheduleContainer>
                    <ScheduleItemClock>
                        <Feather name="clock" size={40} color="#2AB5D1" />
                        <ScheduleText>{orphanage.opening_hours}</ScheduleText>
                    </ScheduleItemClock>

                    {
                        orphanage.open_on_weekends ? (
                            <ScheduleItemInfo>
                                <Feather name="info" size={40} color="#39cc83" />
                                <ScheduleText style={{ color: '#37c77f' }}>
                                    Atendemos fim de semana
                            </ScheduleText>
                            </ScheduleItemInfo>
                        ) : (
                                <ScheduleItemInfoRed>
                                    <Feather name="info" size={40} color="#ff669d" />
                                    <ScheduleText style={{ color: '#ff669d' }}>
                                        Não atendemos fim de semana
                                    </ScheduleText>
                                </ScheduleItemInfoRed>
                            )
                    }
                </ScheduleContainer>

                <ContactButton>
                    <FontAwesome name="whatsapp" size={24} color="#fff" />
                    <ContactButtonText>Entrar em contato</ContactButtonText>
                </ContactButton>
            </DetailsContainer>
        </Container>
    );
}

CodeCard: React.FC<CodeCardProps> = ({
  onReport,
  profile: { codeImgIds, photoUrl, displayName, age, flair, bio },
}) => {
  const [expand, setExpand] = useState(false);
  const [imgIdx, setImgIdx] = useState(0);
  const setSrc = useContext(FullscreenImageZoomContext);

  return (
    <View style={{ position: "relative" }}>
      <View
        style={{
          position: "absolute",
          bottom: 0,
          zIndex: 1,
          height: "100%",
          width: "100%",
        }}
      >
        <View
          style={{
            flex: 1,
            flexDirection: "row",
            width: "100%",
          }}
        >
          <TouchableOpacity
            style={{ width: codeImageWidth / 2 }}
            onPress={() =>
              setImgIdx(imgIdx === 0 ? codeImgIds.length - 1 : imgIdx - 1)
            }
          />
          <TouchableOpacity
            style={{
              flex: 1,
              width: codeImageWidth / 2,
            }}
            onPress={() => setImgIdx((imgIdx + 1) % codeImgIds.length)}
          />
        </View>
        <View
          style={{
            backgroundColor: "#0d0d0d",
            borderBottomLeftRadius: 9,
            borderBottomRightRadius: 9,
            width: "100%",
            padding: 12,
          }}
        >
          <TouchableOpacity
            onPress={() => setExpand(!expand)}
            style={{ flexDirection: "row" }}
          >
            <Avatar src={photoUrl} />
            <View
              style={{
                marginLeft: 12,
                flex: 1,
                flexDirection: "row",
                alignItems: "center",
              }}
            >
              <View style={{ flex: 1 }}>
                <View style={{ flexDirection: "row" }}>
                  <Text numberOfLines={1} style={{ color: "#fff" }}>
                    <Text
                      style={{
                        fontWeight: "800",
                        fontSize: 20,
                      }}
                    >
                      {displayName}
                    </Text>
                    <Text
                      style={{
                        fontWeight: "300",
                        fontSize: 18,
                      }}
                    >
                      {"  "}
                      {age}
                    </Text>
                  </Text>
                  {flair ? (
                    <View style={{ marginLeft: 4 }}>
                      <Flair name={flair as any} />
                    </View>
                  ) : null}
                </View>
                <Text
                  style={{ color: "#fff", marginTop: 4 }}
                  numberOfLines={expand ? undefined : 1}
                >
                  {bio}
                </Text>
              </View>
              {!expand ? (
                <TouchableOpacity
                  onPress={() => {
                    setSrc(`https://img.vsinder.com/${codeImgIds[imgIdx]}`);
                  }}
                  style={{ paddingLeft: 12 }}
                >
                  <Feather name="zoom-in" color="#fff" size={28} />
                </TouchableOpacity>
              ) : null}
            </View>
          </TouchableOpacity>
          {onReport ? (
            <ReportDialog onReportMessage={onReport}>
              {(setOpen) =>
                expand ? (
                  <MyButton
                    onPress={() => setOpen(true)}
                    style={{ marginTop: 10 }}
                  >
                    report
                  </MyButton>
                ) : null
              }
            </ReportDialog>
          ) : null}
        </View>
      </View>
      <CodeImage id={codeImgIds[imgIdx]} />
    </View>
  );
}

CodeCard: React.FC<CodeCardProps> = ({
  onReport,
  profile: { codeImgIds, photoUrl, displayName, age, flair, bio },
}) => {
  const [expand, setExpand] = useState(false);
  const [imgIdx, setImgIdx] = useState(0);
  const setSrc = useContext(FullscreenImageZoomContext);
  const [{ editorBackground }] = useContext(ThemeContext);

  return (
    <View style={{ position: "relative" }}>
      <View style={indicatorStyles.indicator}>
        {codeImgIds.length > 1 && (<View
          style={indicatorStyles.flexGrid}
        >
          {codeImgIds.map((_, index) => {
            return <View
              key={index}
              style={[indicatorStyles.col, (index === (imgIdx || 0)) ? indicatorStyles.active : indicatorStyles.inactive]}
            />
          })}
        </View>)}
      </View>
      <View
        style={{
          position: "absolute",
          bottom: 0,
          zIndex: 1,
          height: "100%",
          width: "100%",
        }}
      >
        <View
          style={{
            flex: 1,
            flexDirection: "row",
            width: "100%",
          }}
        >
          <TouchableOpacity
            style={{ width: codeImageWidth / 2 }}
            onPress={() =>
              setImgIdx(imgIdx === 0 ? codeImgIds.length - 1 : imgIdx - 1)
            }
          />
          <TouchableOpacity
            style={{
              flex: 1,
              width: codeImageWidth / 2,
            }}
            onPress={() => setImgIdx((imgIdx + 1) % codeImgIds.length)}
          />
        </View>
        <View
          style={{
            backgroundColor: "#0d0d0d",
            borderBottomLeftRadius: 9,
            borderBottomRightRadius: 9,
            width: "100%",
            padding: 12,
          }}
        >
          <TouchableOpacity
            onPress={() => setExpand(!expand)}
            style={{ flexDirection: "row" }}
          >
            <Avatar src={photoUrl} />
            <View
              style={{
                marginLeft: 12,
                flex: 1,
                flexDirection: "row",
                alignItems: "center",
              }}
            >
              <View style={{ flex: 1 }}>
                <View style={{ flexDirection: "row" }}>
                  <Text
                    numberOfLines={1}
                    style={{ color: "#fff", flexShrink: 1 }}
                  >
                    <Text
                      style={{
                        fontWeight: "800",
                        fontSize: 20,
                      }}
                    >
                      {displayName}
                    </Text>
                    <Text
                      style={{
                        fontWeight: "300",
                        fontSize: 18,
                      }}
                    >
                      {"  "}
                      {age}
                    </Text>
                  </Text>
                  {flair ? (
                    <View style={{ marginLeft: 4 }}>
                      <Flair name={flair as any} />
                    </View>
                  ) : null}
                </View>
                <Text
                  style={{ color: "#fff", marginTop: 4 }}
                  numberOfLines={expand ? undefined : 1}
                >
                  {bio}
                </Text>
              </View>
              {!expand ? (
                <TouchableOpacity
                  onPress={() => {
                    setSrc(`https://img.vsinder.com/${codeImgIds[imgIdx]}`);
                  }}
                  style={{ paddingLeft: 12 }}
                >
                  <Feather name="zoom-in" color="#fff" size={28} />
                </TouchableOpacity>
              ) : null}
            </View>
          </TouchableOpacity>
          {onReport ? (
            <ReportDialog onReportMessage={onReport}>
              {(setOpen) =>
                expand ? (
                  <MyButton
                    onPress={() => setOpen(true)}
                    style={{ marginTop: 10 }}
                  >
                    report
                  </MyButton>
                ) : null
              }
            </ReportDialog>
          ) : null}
        </View>
      </View>
      <View style={{ position: "absolute", backgroundColor: editorBackground, borderRadius: 9, height: codeImageHeight - 10, width: codeImageWidth - 2, top: 2, left: 2 }} />
      <CodeImage id={codeImgIds[imgIdx]} />
    </View>
  );
}

Footer = ({ tweet }: FooterContainerProps) => {

  console.log(tweet);

  const [user, setUser] = useState(null);
  const [myLike, setMyLike] = useState(null);
  const [likesCount, setLikesCount] = useState(tweet.likes.items.length);

  useEffect(() => {
    const fetchUser = async () => {
      const currentUser = await Auth.currentAuthenticatedUser();
      setUser(currentUser);

      const searchedLike = tweet.likes.items.find(
        (like) => like.userID === currentUser.attributes.sub
      );
      setMyLike(searchedLike);
    }
    fetchUser();
  }, [])

  const submitLike = async () => {
    const like = {
      userID: user.attributes.sub,
      tweetID: tweet.id,
    }

    try {
      const res = await API.graphql(graphqlOperation(createLike, { input: like }))
      setMyLike(res.data.createLike);
      setLikesCount(likesCount + 1);
    } catch (e) {
      console.log(e);
    }
  }

  const removeLike = async () => {
    try {
      await API.graphql(graphqlOperation(deleteLike, { input: { id: myLike.id } }))
      setLikesCount(likesCount - 1);
      setMyLike(null);
    } catch (e) {
      console.log(e);
    }
  }

  const onLike = async () => {
    if (!user) {
      return;
    }

    if (!myLike) {
      await submitLike()
    } else {
      await removeLike();
    }

  }

  return (
    <View style={styles.container}>
      <View style={styles.iconContainer}>
        <Feather name={"message-circle"} size={20} color={'grey'}/>
        <Text style={styles.number}>{tweet.numberOfComments}</Text>
      </View>
      <View style={styles.iconContainer}>
        <EvilIcons name={"retweet"} size={28} color={'grey'}/>
        <Text style={styles.number}>{tweet.numberOfRetweets}</Text>
      </View>
      <View style={styles.iconContainer}>
        <TouchableOpacity onPress={onLike}>
          <AntDesign name={!myLike ? "hearto" : "heart"} size={20} color={!myLike ? 'grey' : 'red'}/>
        </TouchableOpacity>
        <Text style={styles.number}>{likesCount}</Text>
      </View>
      <View style={styles.iconContainer}>
        <EvilIcons name={"share-google"} size={28} color={'grey'}/>
      </View>
    </View>
  )
}

export default function OrphanageDetails() {
  const route = useRoute();
  const [orphanage, setOrphanage] = useState<Orphanage>();

  const params = route.params as OrphanageDetailsRouteParams;

  useEffect(() => {
    api.get(`orphanages/${params.id}`).then(response => {
      setOrphanage(response.data);
    });
  }, [params.id]);

  if (!orphanage) {
    return (
      <View style={styles.container}>
        <Text style={styles.description}>Carregando...</Text>
      </View>
    );
  }

  function handleOpenGoogleMapRoutes() {
    Linking.openURL(`https://www.google.com/maps/dir/?api=1&destination=${orphanage?.latitude},${orphanage?.longitude}`);
  }

  return (
    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
      <View style={styles.imagesContainer}>
        <ScrollView horizontal pagingEnabled showsHorizontalScrollIndicator={false}>
          {orphanage.images.map(image => (
            <Image
              key={image.id}
              style={styles.image}
              source={{ uri: image.url }}
            />
          ))}
        </ScrollView>
      </View>

      <View style={styles.detailsContainer}>
        <Text style={styles.title}>{orphanage.name}</Text>
        <Text style={styles.description}>{orphanage.about}</Text>

        <View style={styles.mapContainer}>
          <MapView
            initialRegion={{
              latitude: orphanage.latitude,
              longitude: orphanage.longitude,
              latitudeDelta: 0.008,
              longitudeDelta: 0.008,
            }}
            zoomEnabled={false}
            pitchEnabled={false}
            scrollEnabled={false}
            rotateEnabled={false}
            style={styles.mapStyle}
          >
            <Marker
              icon={mapMarkerImg}
              coordinate={{
                latitude: orphanage.latitude,
                longitude: orphanage.longitude,
              }}
            />
          </MapView>

          <TouchableOpacity onPress={handleOpenGoogleMapRoutes} style={styles.routesContainer}>
            <Text style={styles.routesText}>Ver rotas no Google Maps</Text>
          </TouchableOpacity>
        </View>

        <View style={styles.separator} />

        <Text style={styles.title}>Instruções para visita</Text>
        <Text style={styles.description}>{orphanage.instructions}</Text>

        <View style={styles.scheduleContainer}>
          <View style={[styles.scheduleItem, styles.scheduleItemBlue]}>
            <Feather name="clock" size={40} color="#2AB5D1" />
            <Text style={[styles.scheduleText, styles.scheduleTextBlue]}>Segunda à Sexta {orphanage.opening_hours}</Text>
          </View>

          {orphanage.open_on_weekends ? (
            <View style={[styles.scheduleItem, styles.scheduleItemGreen]}>
              <Feather name="info" size={40} color="#39CC83" />
              <Text style={[styles.scheduleText, styles.scheduleTextGreen]}>Atendemos fim de semana</Text>
            </View>
          ) : (
            <View style={[styles.scheduleItem, styles.scheduleItemRed]}>
              <Feather name="info" size={40} color="#FF669D" />
              <Text style={[styles.scheduleText, styles.scheduleTextRed]}>Não atendemos fim de semana</Text>
            </View>
          )}
        </View>

        {/* <RectButton style={styles.contactButton} onPress={() => {}}>
          <FontAwesome name="whatsapp" size={24} color="#FFF" />
          <Text style={styles.contactButtonText}>Entrar em contato</Text>
        </RectButton> */}
      </View>
    </ScrollView>
  )
}

export default function OrphanageData() {
  const [name, setName] = useState('');
  const [about, setAbout] = useState('');
  const [instructions, setInstructions] = useState('');
  const [opening_hours, setOpeningHours] = useState('');
  const [open_on_weekends, setOpenOnWeekends] = useState(true);
  const [images, setImages] = useState<string[]>([]);

  const navigation = useNavigation();
  const routes = useRoute();
  const params = routes.params as OrphanageDataRouteParams;

  async function handleCreateOrphanage() {
    const { latitude, longitude } = params.position;

    console.log({
      name,
      latitude,
      longitude,
      about,
      instructions,
      opening_hours,
      open_on_weekends,
    });

    const data = new FormData();

    data.append('name', name);
    data.append('about', about);
    data.append('latitude', String(latitude));
    data.append('longitude', String(longitude));
    data.append('instructions', instructions);
    data.append('opening_hours', opening_hours);
    data.append('open_on_weekends', String(open_on_weekends));

    images.forEach((image, index) => {
      data.append('images', {
        name: `image_${index}.jpg`,
        type: 'image/jpg',
        uri: image,
      } as any);
    });

    await api.post('orphanages', data);

    navigation.navigate('OrphanagesMap');
  }

  async function handleSelectImages() {
    const { status } = await ImagePicker.requestCameraRollPermissionsAsync();

    if (status !== 'granted') {
      alert('Eita, precisamos de acesso às suas fotos!');
      return;
    }

    const result = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      quality: 1,
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
    });

    if (result.cancelled) {
      return;
    }

    const { uri: image } = result;
    setImages([...images, image]);
  }

  return (
    <ScrollView style={styles.container} contentContainerStyle={{ padding: 24 }}>
      <Text style={styles.title}>Dados</Text>

      <Text style={styles.label}>Nome</Text>
      <TextInput
        style={styles.input}
        value={name}
        onChangeText={setName}
      />

      <Text style={styles.label}>Sobre</Text>
      <TextInput
        style={[styles.input, { height: 110 }]}
        multiline
        value={about}
        onChangeText={setAbout}
      />

      {/* <Text style={styles.label}>Whatsapp</Text>
      <TextInput
        style={styles.input}
      /> */}

      <Text style={styles.label}>Fotos</Text>

      <View style={styles.uploadedImagesContaier}>
        {images.map(image => (
          <Image
            key={image}
            source={{ uri: image }}
            style={styles.uploadedImage}
          />
        ))}
      </View>

      <TouchableOpacity style={styles.imagesInput} onPress={handleSelectImages}>
        <Feather name="plus" size={24} color="#15B6D6" />
      </TouchableOpacity>

      <Text style={styles.title}>Visitação</Text>

      <Text style={styles.label}>Instruções</Text>
      <TextInput
        style={[styles.input, { height: 110 }]}
        multiline
        value={instructions}
        onChangeText={setInstructions}
      />

      <Text style={styles.label}>Horario de visitas</Text>
      <TextInput
        style={styles.input}
        value={opening_hours}
        onChangeText={setOpeningHours}
      />

      <View style={styles.switchContainer}>
        <Text style={styles.label}>Atende final de semana?</Text>
        <Switch
          thumbColor="#fff"
          trackColor={{ false: '#ccc', true: '#39CC83' }}
          value={open_on_weekends}
          onValueChange={setOpenOnWeekends}
        />
      </View>

      <RectButton style={styles.nextButton} onPress={handleCreateOrphanage}>
        <Text style={styles.nextButtonText}>Cadastrar</Text>
      </RectButton>
    </ScrollView>
  )
}