u/vaquishaProdigy

Everytime i try to use KeyboardAvoingView this happens, is there a way to solve this issue?

Here's the code:

index.js

    import { Picker } from "@react-native-picker/picker";
    import { registerRootComponent } from "expo";
    import * as Speech from "expo-speech";
    import { useEffect, useState } from "react";
    import {
      Button,
      KeyboardAvoidingView,
      Platform,
      ScrollView,
      Text,
      TextInput,
      View,
    } from "react-native";
    import { SafeAreaView } from "react-native-safe-area-context";
    import { scale } from "react-native-size-matters";
    import { styles } from "./styles/styles";
    
    
    registerRootComponent(index);
    
    
    export default function index() {
      const [textToSpeak, setTextToSpeak] = useState("");
      const [availableVoices, setAvailableVoices] = useState([]);
      const [selectedLanguage, setSelectedLanguage] = useState("");
    
    
      useEffect(() => {
        const loadVoices = async () => {
          try {
            const voices = await Speech.getAvailableVoicesAsync();
            setAvailableVoices(voices);
            if (voices.length > 0) {
              setSelectedLanguage(voices[0].language);
            }
          } catch (error) {
            console.error("Error loading voices:", error);
          }
        };
        loadVoices();
      }, []);
    
    
      const handleSpeak = () => {
        if (textToSpeak.trim()) {
          Speech.speak(textToSpeak, { rate: 0.7, language: selectedLanguage });
        }
      };
    
    
      return (
        <SafeAreaView
          style={styles.container}
          edges={["top", "bottom", "left", "right"]}
        >
          <KeyboardAvoidingView
            behavior={Platform.OS === "ios" ? "padding" : "height"}
          >
            <ScrollView showsVerticalScrollIndicator={false}>
              <Text style={styles.title}>Simple Text to Speech App</Text>
    
    
              <View style={styles.card}>
                <Text style={styles.label}>Available voices</Text>
    
    
                <View style={styles.pickerContainer}>
                  <Picker
                    selectedValue={selectedLanguage}
                    onValueChange={(itemValue) => setSelectedLanguage(itemValue)}
                    style={styles.picker}
                    mode="dropdown"
                  >
                    {availableVoices.map((voice) => (
                      <Picker.Item
                        key={voice.identifier}
                        label={voice.language}
                        value={voice.language}
                      />
                    ))}
                  </Picker>
                </View>
                <Text style={styles.label}>Text</Text>
    
    
                <TextInput
                  style={styles.input}
                  value={textToSpeak}
                  onChangeText={setTextToSpeak}
                  placeholder="Write what ever you want in here..."
                  multiline
                  minHeight={scale(100)}
                  maxHeight={scale(110)}
                  textAlignVertical="top"
                />
    
    
                <View style={styles.buttonContainer}>
                  <Button title="Start speaking" onPress={handleSpeak} />
                </View>
              </View>
    
    
              <View style={styles.card}>
                <Text style={styles.label}>Output</Text>
    
    
                <ScrollView
                  style={styles.output}
                  showsVerticalScrollIndicator={false}
                >
                  <Text style={styles.outputText}>
                    {textToSpeak || "Your content will appear here."}
                  </Text>
                </ScrollView>
    
    
                <View style={styles.buttonContainer}>
                  <Button title="Export to PDF" onPress={() => {}} />
                </View>
              </View>
            </ScrollView>
          </KeyboardAvoidingView>
        </SafeAreaView>
      );
    }

styles.js

import { StyleSheet } from "react-native";
import { scale } from "react-native-size-matters";

export const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#cdcbcb",
    padding: scale(20),
    paddingBottom: scale(10),
  },

  title: {
    fontSize: 22,
    fontWeight: "700",
    color: "#222",
    marginBottom: scale(14),
    textAlign: "center",
  },

  card: {
    backgroundColor: "#FFF",
    borderRadius: 5,
    padding: scale(16),
    marginBottom: scale(8),

    shadowColor: "#545454",
    shadowOffset: {
      width: 0,
      height: scale(2),
    },
    shadowOpacity: 0.08,
    shadowRadius: 6,

    elevation: scale(4),
  },

  label: {
    fontSize: 15,
    fontWeight: "600",
    color: "#444",
    marginBottom: scale(10),
  },
  pickerContainer: {
    borderWidth: scale(1),
    borderColor: "#DDD",
    borderRadius: 5,
    backgroundColor: "#FAFAFA",
    marginBottom: scale(10),
    overflow: "hidden",
  },

  picker: {
    height: scale(60),
    color: "#222",
  },

  input: {
    minHeight: scale(120),
    borderWidth: scale(1),
    borderColor: "#DDD",
    borderRadius: 2,
    padding: scale(14),
    backgroundColor: "#FAFAFA",
    fontSize: 16,
  },

  output: {
    height: scale(190),
    borderWidth: scale(1),
    borderColor: "#DDD",
    borderRadius: 2,
    backgroundColor: "#FAFAFA",
    padding: scale(14),
  },

  outputText: {
    fontStyle: "italic",
    fontSize: 16,
    color: "#7f7e7e",
    lineHeight: scale(24),
  },

  buttonContainer: {
    marginTop: scale(18),
    borderRadius: 2,
    overflow: "hidden",
  },
});

Why does it show that array in the console log when i try to get the available voices data? Or am i doing something wrong? I'm developing on Android

Instead of a sample picture, how can i make this component to be something like the WhatsApp link button?

There should be a dropdown menu or picker below the "Package Data" label, but idk whats going on. I follow all the steps in the Github page, in the npm one, and also Youtube tutorials and none of them seem to work.

Here's the code and the dependencies i have install:

{
  "name": "expo-template-default",
  "license": "0BSD",
  "main": "expo-router/entry",
  "version": "54.0.35",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "lint": "expo lint",
    "draft": "npx eas-cli@latest workflow:run create-draft.yml",
    "development-builds": "npx eas-cli@latest workflow:run create-development-builds.yml",
    "deploy": "npx eas-cli@latest workflow:run deploy-to-production.yml"
  },
  "dependencies": {
    "@expo/metro-runtime": "~6.1.2",
    "@expo/vector-icons": "^15.0.2",
    "@react-native-picker/picker": "^2.11.4",
    "@react-navigation/bottom-tabs": "^7.4.0",
    "@react-navigation/elements": "^2.6.3",
    "@react-navigation/native": "^7.1.8",
    "expo": "^54.0.34",
    "expo-constants": "~18.0.9",
    "expo-font": "~14.0.11",
    "expo-haptics": "~15.0.7",
    "expo-image": "~3.0.8",
    "expo-router": "^6.0.23",
    "expo-status-bar": "~3.0.8",
    "expo-symbols": "~1.0.7",
    "expo-system-ui": "~6.0.7",
    "expo-updates": "^29.0.17",
    "react": "19.1.0",
    "react-dom": "19.1.0",
    "react-native": "0.81.5",
    "react-native-gesture-handler": "~2.28.0",
    "react-native-safe-area-context": "~5.6.0",
    "react-native-screens": "~4.16.0",
    "react-native-web": "~0.21.0",
    "react-native-worklets": "0.5.1"
  },
  "devDependencies": {
    "@types/react": "~19.1.0",
    "eslint": "^9.25.0",
    "eslint-config-expo": "~10.0.0"
  }
}

import { Picker } from "@react-native-picker/picker";
import { useRouter } from "expo-router";
import { useState } from "react";
import {
  FlatList,
  Pressable,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
import { data } from "../data/data";
import { styles } from "../styles/styles";


export default function Index() {
  const router = useRouter();
  const [selectedItem, setSelectedItem] = useState();


  return (
    <SafeAreaProvider>
      <SafeAreaView>
        <View style={styles.container}>
          <View style={styles.packageInputContainer}>
            <Text style={{ fontSize: 22 }}>Package Data</Text>
            <View>
              <Picker
                selectedValue={selectedItem}
                onValueChange={(itemValue) => setSelectedItem(itemValue)}
              >
                <Picker.Item label="Javascript" value="javascript" />
                <Picker.Item label="Godot" value="godot" />
              </Picker>
            </View>


            <TextInput style={styles.textInput}></TextInput>


            <Pressable>
              <TouchableOpacity
                onPress={() => ({})}
                style={styles.trackingButton}
              >
                <Text style={{ fontSize: 22 }}>Start Tracking</Text>
              </TouchableOpacity>
            </Pressable>
          </View>


          <FlatList
            data={data}
            keyExtractor={(item) => item.id.toString()}
            contentContainerStyle={styles.list}
            showsVerticalScrollIndicator={false}
            renderItem={({ item }) => (
              <Pressable>
                <TouchableOpacity onPress={() => router.navigate("details")}>
                  <View style={styles.card}>
                    <View style={styles.header}>
                      <Text style={styles.id}>#{item.id}</Text>
                    </View>


                    <Text style={styles.package}>{item.packageName}</Text>


                    <Text style={styles.description}>{item.description}</Text>


                    <View style={styles.footer}>
                      <Text style={styles.email}>📧 {item.email}</Text>
                    </View>
                  </View>
                </TouchableOpacity>
              </Pressable>
            )}
          />
        </View>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

Is it possible to generate a temporary certificate for a seven day sign with a personal account? Everytime i want to try to build an .ipa with a new tool requires a certificate or something generated by Apple hardware or software, and when i try to do it, it gives me this error or the 401 one

What can i do with this? Laptop is an old HP with an Intel Core2Duo (don't know the exact model), 4 GB of maxed RAM, router is an Huawei EG8145V5. Happy to read your thoughts.

Which MacOS version should i install to this? I just want to be able to code in it, and also dual boot with Linux Mint, or what should i do? Leave you thoughts.

CPU: Intel i5 12450-H RAM: 16GB GPU: GTX 1650 Mobile