Forum Pasja Informatyki - Najnowsze z tagiem react-native

Błąd "No ViewManager" kiedy używam nawigacji w React Native

Thu, 26 Jun 2025 20:24:53 +0000

Hej, piszę w React Native prostą aplikację: przełączanie się między dwoma ekranami. Ale nawet w prostej aplikacji dostaję błąd "No ViewManager found for class RNCSafeAreaProvider". Wszystkie konieczne do nawigacji pakiety mam zainstalowane (@react-navigation/native, react-native-screens, react-native-safe-area-context). Aplikację testuję na fizycznym urządzeniu na Androidzie.

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { SafeAreaProvider } from "react-native-safe-area-context";

const Stack= createNativeStackNavigator();

function HomeScreen({ navigation }) {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Home Screen</Text>
            <Button
                title="Go to Details"
                onPress={() => navigation.navigate('Details')}
            />
        </View>
    );
}

function DetailsScreen() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Details Screen</Text>
            <Button
                title="Go to Home"
                onPress={() => navigation.navigate('Home')}
            />
        </View>
    );
}

export default function App() {
    return (
        <SafeAreaProvider>
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen name="Home" component={HomeScreen} />
                    <Stack.Screen name="Details" component={DetailsScreen} />
                </Stack.Navigator>
            </NavigationContainer>
        </SafeAreaProvider>
    );
}

Aplikacje bez nawigatora ("Hello world" czy coś takiego) działają. Problem pojawia się gdy używam nawigacji,

Próbowałem zwykłego restartu komputera i telefonu, utworzenia nowego projektu, w którym znowu napisałem taki sam kod, przeinstalować pakiety wymagane do nawigacji. Ciągle ten sam problem.

Nie działa APK przy StackNavigator

Mon, 02 Jun 2025 11:51:07 +0000

Uszanowanie, bawię się w pisanie aplikacji w React Native używając Expo Go do testowania. Kiedy używam `npx expo start` i skanuję kod QR w Expo Go na fizycznym urządzeniu to wszystko działa.
Kiedy chcę wygenerować plik APK używam polecenia `eas build -p android --profile preview` i tu napotykam na problem.

Nie działa. Zauważyłem, że ogólnie wszystko działa, jeśli nie użyję nawigatora; jeśli do pliku App.js dam kod z jednego z ekranów to wszystko się generuje (oczywiście nie ma nawigatora). Po uruchomieniu aplikacji widzę jedynie czarny ekran.
Tu jest podgląd jak to wygląda po zainstalowaniu.

Nie działa to nawet dla prostej aplikacji, typu: przycisk Go to Home oraz drugi Go to About.

Tu jest możliwy do pobrania plik .apk

Żeby wygenerować plik .apk postępuję zgodnie z instrukcjami z docs.expo.dev.

Znalazłem że w niektórych przypadkach pomaga usunięcie parametru `alignItems: "center"` z komponentu View, który zawiera nawigator sam w sobie. To jednak nie pomogło.

node --version
v18.19.1

npm expo --version
9.2.0

A tu podaję wszystkie istotne (chyba) pliki:

App.js

import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Home from "./screens/Home";
import About from './screens/About';
const Stack=createNativeStackNavigator();

export default function App() {
    return (
        <View style={{flex:1}}>
            <NavigationContainer>
                <Stack.Navigator initialRouteName='Home'>
                    <Stack.Screen component={Home} name="Home"/>
                    <Stack.Screen component={About} name="About"/>
                </Stack.Navigator>
            </NavigationContainer>
        </View>
    );
}

app.json

{
  "expo": {
    "name": "app1",
    "slug": "app1",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "newArchEnabled": true,
    "splash": {
      "image": "./assets/splash-icon.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "edgeToEdgeEnabled": true,
      "package": "com.kardimon57.app1"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "extra": {
      "eas": {
        "projectId": "7d4011bb-176d-4861-bb81-fa7f9f0c4cc9"
      }
    }
  }
}

eas.json

{
  "cli": {
    "version": ">= 16.7.0",
    "appVersionSource": "remote"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "android": {
        "buildType": "apk"
      },
      "distribution": "internal"
    },
    "production": {
      "autoIncrement": true
    }
  },
  "submit": {
    "production": {}
  }
}

Z góry dzięki za pomoc.

UseCart must be used within a cartPrivider - React-native

Wed, 15 Jan 2025 15:29:43 +0000

Buduję aplikację swojego sklepu internetowego shopinfie. Mam ekran koszyka, ale po próbie otwarcia wyświetla się

Mój cały projekt jest dostępny na githubie: https://github.com/piotrek1372/shopinfie

Ale głownie interesują mnie pliki:

import React, { createContext, useState, useContext, ReactNode } from "react";

interface CartItem {
  id: number;
  name: string;
  price: number;
  image: string;
}

interface CartContextType {
  cartItems: CartItem[];
  addToCart: (product: CartItem) => void;
  removeFromCart: (productId: number) => void;
}

const CartContext = createContext<CartContextType | undefined>(undefined);

export const CartProvider = ({ children }: { children: ReactNode }) => {
  const [cartItems, setCartItems] = useState<CartItem[]>([]);

  const addToCart = (product: CartItem) => {
    setCartItems((prev) => [...prev, product]);
  };

  const removeFromCart = (productId: number) => {
    setCartItems((prev) => prev.filter((item) => item.id !== productId));
  };

  return (
    <CartContext.Provider value={{ cartItems, addToCart, removeFromCart }}>
      {children}
    </CartContext.Provider>
  );
};

export const useCart = (): CartContextType => {
  const context = useContext(CartContext);
  if (!context) {
    throw new Error("useCart must be used within a CartProvider");
  }
  return context;
};

import React from "react";
import { View, Text, FlatList, Image, TouchableOpacity, StyleSheet } from "react-native";
import { useCart } from "../../context/cartContext";

const CartScreen = () => {
  const { cartItems, removeFromCart } = useCart();

  const calculateTotalPrice = () =>
    cartItems.reduce((total, item) => total + item.price, 0);

  const renderCartItem = ({ item }) => (
    <View style={styles.cartItem}>
      <Image source={{ uri: item.image }} style={styles.productImage} />
      <View style={styles.productDetails}>
        <Text style={styles.productName}>{item.name}</Text>
        <Text style={styles.productPrice}>{item.price.toFixed(2)} zł</Text>
        <TouchableOpacity
          style={styles.removeButton}
          onPress={() => removeFromCart(item.id)}
        >
          <Text style={styles.removeButtonText}>Usuń</Text>
        </TouchableOpacity>
      </View>
    </View>
  );

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Koszyk</Text>
      {cartItems.length > 0 ? (
        <>
          <FlatList
            data={cartItems}
            renderItem={renderCartItem}
            keyExtractor={(item) => item.id.toString()}
          />
          <View style={styles.summaryContainer}>
            <Text style={styles.totalText}>
              Łączna cena: {calculateTotalPrice().toFixed(2)} zł
            </Text>
          </View>
        </>
      ) : (
        <Text style={styles.emptyCartText}>Twój koszyk jest pusty</Text>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f8f8f8",
  },
  header: {
    fontSize: 24,
    fontWeight: "bold",
    textAlign: "center",
    marginVertical: 10,
    color: "#333",
  },
  cartItem: {
    flexDirection: "row",
    backgroundColor: "#fff",
    marginVertical: 8,
    borderRadius: 8,
    overflow: "hidden",
    borderWidth: 1,
    borderColor: "#ddd",
  },
  productImage: {
    width: 100,
    height: 100,
    resizeMode: "contain",
  },
  productDetails: {
    flex: 1,
    padding: 10,
  },
  productName: {
    fontSize: 16,
    fontWeight: "bold",
  },
  productPrice: {
    fontSize: 14,
    color: "#888",
  },
  removeButton: {
    backgroundColor: "#ff6666",
    borderRadius: 4,
    padding: 5,
  },
  removeButtonText: {
    color: "#fff",
  },
  summaryContainer: {
    padding: 20,
    borderTopWidth: 1,
    borderColor: "#ddd",
    backgroundColor: "#fff",
  },
  totalText: {
    fontSize: 18,
    fontWeight: "bold",
    textAlign: "center",
  },
  emptyCartText: {
    fontSize: 18,
    textAlign: "center",
    color: "#888",
    marginTop: 20,
  },
});

export default CartScreen;

Jak ten błąd naprawić? Co on oznacza?

React Native Video: Cannot read property 'Constants' of null

Tue, 16 May 2023 09:55:51 +0000

Jak wyżej, mam problem z video w React nativie, po wejściu na stronę która ma je wyświetlać, dostaję taki błąd:

Mój kod:

import Video from 'react-native-video';

const playerPage = ({route}) => {
    const {book} = route.params;
  return (
    <View style={StyleSheet.mainPlayerView}>
        <View style={{height: '33%', width: '100%'}}>
            <Video controls={true} source={{uri: book.video}} style={{width: '100%', height: '100%'}} />
        </View>
        <Text>{book.video}</Text>
    </View>
  )
}

Używam Expo go. Próbowałam usunąć node_modules i npm i.

React Native - problem z nawigacją

Sat, 01 Apr 2023 12:53:03 +0000

Próbuję stworzyć pasek nawigacyjny w React nativie. Udało mi się jakoś go ostylować, teraz chciałabym, aby po kliknięciu na napis/przycisk w rozwijanym menu zmienił się ekran, ale nawigacja w React Nativie różni się od tej w Reaccie. Czy w ogóle da się zrobić tak, by w jednego paska nawigacyjnego, działającego jako osobny komponent nawigować po całej aplikacji? Poniżej wklejam próby utworzenia czegoś takiego, niestety, po kliknięciu ekran się nie zmienia. To mój pierwszy projekt w React Nativie, czy menu może nie działać, przez nakaz zwinięcia go po kliknięciu gdziekolwiek?

Kod paska:

const NavBar = ({navigation}) => {

  const menuItems = [
    {
      route: '../../homepage/homepage',
      displayTitle: 'Home'
    },
    {
      route: 'User Info',
      displayTitle: 'User Info'
    },
    {
      route: 'Book list',
      displayTitle: 'Book list'
    },
    {
      route: ' All books list',
      displayTitle: 'All books list'
    },
    {
      route: 'Login',
      displayTitle: 'Login'
    }
  ];

  const [showMenu, setShowMenu] = useState(false);

  const toggleMenu = () => {
    setShowMenu(!showMenu);
  };

  const handlePressOutside = () => {
    setShowMenu(false);
  };

  let [font] = useFonts({
    MrDafoe_400Regular
  })
  if(!font){
    return <AppLoading />;
  }

    return(
      <View style={styles.all}>
        <View style={styles.container}>
            <TouchableOpacity onPress={toggleMenu} style={{marginTop: 22}}>
              <Feather name="menu" size={30} color="white" alignSelf="flex-end" />  
            </TouchableOpacity>       
            <Text style={styles.logoText}>myShelf</Text>
        </View>
        {showMenu && (
             <View style={styles.menuBar}>
             {menuItems.map((menuItem) => (
                <TouchableOpacity
                  key={menuItem.route}
                  onPress={() => setCurrentView(menuItem.route)}
                  //onPress={() => navigation.navigate(menuItem.route)}
                >
                  <Text style={styles.menuText}>{menuItem.displayTitle}</Text>
                </TouchableOpacity>
              ))}
             </View>
       )}
       {showMenu && (
         <TouchableOpacity
           onPress={handlePressOutside}
           style={{ position: 'absolute', top: 0, bottom: 0, right: 0, left: 0 }}
         />
       )}

      </View>
    )
}

Kod App.js:

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
              name="Home"
              component={Homepage}
              options={{headerShown: false}}
            />
            <Stack.Screen 
              name="Login"
              component={Login}
              options={{headerShown: false}}
            />
        </Stack.Navigator>
    </NavigationContainer>
      
  );
}

Kod przykładowego ekranu, np Homepage:

const HomePage = () => {
  return (
    <View style={styles.container}>
      <NavBar/>
      <Text>Home page</Text>
      <StatusBar style="auto" />
    </View>
  );
}

Wkleiłam jedynie najważniejsze fragmenty kodów, z pominięciem importów czy CSS.

React Native-problem

Mon, 20 Mar 2023 16:11:24 +0000

Witam,

uczę się pisać w reakcie native.

Alert który powinien wyświetlić się po kliknięciu przycisku, wyświetla się zaraz po starcie aplikacji.

Jest w stanie ktoś pomódz?

Z góry dziękuję za wszystkie odpowiedzi.

import React from 'react';
import {Button, Alert, View, Text, StyleSheet, ScrollView, TouchableHighlight} from "react-native";
import {Component} from "react";

export default class App extends Component {
  _kliknieto() {
    Alert.alert('Kliknięto!');
  }

  render() {
    return (
    <ScrollView style={styles.maincontainer}>
        <TouchableHighlight onPress={this._kliknieto()} underlayColor='#white'>
          <View style={styles.btn}>
            <Text style={styles.btntext}>Kliknij Mnie!</Text>
          </View>
        </TouchableHighlight>
    </ScrollView>
    );
  }
}
const styles = StyleSheet.create({
  maincontainer: {
    padding: 15,
    paddingTop: 30,
    backgroundColor: '#fce7c7',
  },
  logo: {
    backgroundColor: '#2b2b2b',
    color: '#fff',
    padding: 25,
  },
  btn: {
    marginBottom: 15,
    borderRadius: 3,
    color: '#fff',
    padding: 5,
    height: 50,
    backgroundColor: '#bc8f8f',
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  btntext: {
    textAlign: "center",
    color: '#fff',
    fontSize: 18,
  },
})

React Native

Sun, 19 Mar 2023 09:11:32 +0000

Witam,

zacząłem naukę Reacta Native i napotkałem taki błąd: "ERROR ReferenceError: Property 'flex' doesn't exist, js engine: hermes".

Jest w stanie ktoś pomóc?

import React from 'react';
import {ScrollView, Text, StyleSheet, Button, SafeAreaView, View} from 'react-native';

const App = () => (
    <View style={styles.container}>
    <Button onPress={() => {console.log('Button is touched')}}
            style={styles.button}
    title='Press me'
    />
    </View>
);
 const styles =StyleSheet.create({
        container: {
          alignItems: 'center',
          justifyContent: 'center',
            display: 'flex',
        },
        button: {
            backgroundColor: '#10c6cb',
            color: '#fff',
            height: 30,
            width: 50,
        },
     });
export default App;

Z góry dziękuję za wszystkie odpowiedzi

Dynamicznie pojawiające się i znikające elementy w aplikacji react-native

Tue, 09 Aug 2022 09:45:42 +0000

Cześć,

chciałbym w aplikacji zaimplementować cos takiego: Wyświetlają się 3 opcje do zaznaczenia, a po ich zaznaczeniu powinny one zniknąć i pojawić się kolejny ekran z 3 opcjami. Chciałbym żeby to było takie dynamiczne, a wartość tych zaznaczonych elementów gdzieś się zapisywała. W jaki sposób mogę to wykonać?

React Native - Użycie lokalnego api zwraca błąd

Fri, 31 Dec 2021 22:32:35 +0000

Cześć.

Napisałem sobie bazę danych wraz z api w Laravelu i trzymam je na localhoście.

Napisałem również aplikację mobilną w React Native przy użyciu expo. Expo pozwala na uruchamianie aplikacji w przeglądarce, emulatorach oraz na swoim telefonie przy użyciu ich aplikacji (expo go).

Gdy odpalę swoją aplikację mobilną na przeglądarce - axios zwraca mi ładnie całe moje api.

Gdy odpalę swoją aplikację mobilną na swoim telefonie (przy pomocy aplikacji expo go) - axios zwraca Network Error.

Łączę się poprzez link z Ipv4 (ipconfig). Domyślam się, że coś może nie grać z portami, ale nie mam pojęcia jak to połączyć, abym mógł się łączyć z api z mojego telefonu.

React vs ReactNative

Wed, 10 Nov 2021 10:33:25 +0000

Hej, na co dzień programuję apki webowe w Javie i React.

Chciałbym dla siebie stworzyć projekt mobilny w ReactNative i moje pytanie brzmi: czy są duże różnice w syntaxie etc. pomiędzy React a ReactNative, czy raczej bezproblemowo będę mógł się przesiąść na ReactNative?

SQLite - Graficzny podgląd bazy

Wed, 27 Oct 2021 18:49:44 +0000

Cześć.

Do niedawna głównie tworzyłem aplikacje webowe z użyciem MySQL, do którego miałem podgląd graficzny w postaci podstrony /phpmyadmin, którą dostarczał mi pakiet XAMPP. Postanowiłem przerzucić się na pisanie aplikacji mobilnych, gdzie wykorzystuję bazę SQLite.

Chciałem zapytać czy jest jakiś program / wtyczka do mojego edytora kodu, aby mieć podgląd do tego typu bazy danych?

Obecnie używam Visual Studio Code oraz (jeśli ma to znaczenie) aplikacje tworzę w React Native, a do komunikacji z bazą używam wbudowanych bibliotek, które dostarcza system Expo.

Nested Navigator - React Native

Sat, 25 Sep 2021 21:43:35 +0000

Cześć! Robię apkę w react native i chcę użyć React Navigation do nawigacji. Kod wygląda tak:

// In App.js in a new project

import * as React from "react";
import { View, Text } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

import firebase from "firebase";
import { firebaseConfig } from "./firebase-config";
import LoadingScreen from "./screens/Login/LoadingScreen";
import WelcomePage from "./screens/Login/WelcomePage";
import LoginPage from "./screens/Login/LoginPage";
import SignUpEmail from "./screens/Login/SignUpEmail";
import Home from "./screens/Home/Home";
import CurrentReadBookDetails from "./screens/Home/CurrentReadBookDetails";
import LibraryBookDetails from "./screens/Home/LibraryBookDetails";
import BookScanner from "./screens/Home/BookScanner";
import BookDetails from "./screens/Home/BookDetails";
import SearchResult from "./screens/Search/SearchResult";

if (!firebase.apps.length) firebase.initializeApp(firebaseConfig); //musimy sprawdzic czy aplikacja zostala juz zainicjowana czy nie, zeby za kazdym razem nie inicjowac apki
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const TabNavigator = () => (
  <Tab.Navigator initialRouteName="HomeScreen">
    <Tab.Screen name="HomeScreen" component={Home} />
    <Tab.Screen name="Search" component={SearchResult} />
  </Tab.Navigator>
);

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="LoadingScreen">
        <Stack.Screen name="LoadingScreen" component={LoadingScreen} />
        <Stack.Screen name="WelcomePage" component={WelcomePage} />
        <Stack.Screen
          name="Home"
          component={TabNavigator}
          options={{ headerShown: false }}
        />
        <Stack.Screen name="LoginPage" component={LoginPage} />
        <Stack.Screen name="SignUpEmail" component={SignUpEmail} />
        <Stack.Screen name="BookScanner" component={BookScanner} />
        <Stack.Screen name="BookDetails" component={BookDetails} />
        <Stack.Screen
          name="LibraryBookDetails"
          component={LibraryBookDetails}
        />
        <Stack.Screen
          name="CurrentReadBookDetails"
          component={CurrentReadBookDetails}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Problem jest taki, że zagnieździłem TabNavigator w StackNavigator. I teraz gdy próbuje nawigować do Home albo Search, ekran jest pusty... Mimo, że widzę, że dane w console.logu się ładują. Więc co jest nie tak? Routy ze Stack.Navigator'a działają poprawnie, tylko te z zagnieżdżonego pokazują pusty ekran.

Próbuję nawigować do Home i Search w następujący sposób:

navigation.navigate("Home", { screen: "HomeScreen" });

Prosiłbym o pomoc :/

props.location.state.username zwaraca undefined - react native

Sat, 14 Aug 2021 17:04:30 +0000

Witam wszystkich. Mam problem z odczytaniem wartości props.location.state.username i props.location.state.partnerToken, które przekazuję z komponentu Login do HomeScreen poprzez komponent Redirect. Wartości zwracają undefined.

Login.js

import React, { useEffect, useState } from "react";
import {
  TextInput,
  Text,
  StyleSheet,
  View,
  BackHandler,
  TouchableHighlight,
  Image,
} from "react-native";
import { withRouter, Redirect } from "react-router-native";
import global from "./style";
import firebase from "firebase";
import { useFonts } from "expo-font";
import AppLoading from "expo-app-loading";

function Login(props) {
  const [partnerUsername, setPartnerUsername] = useState(
    "Your partner username..."
  );
  const [username, setUsername] = useState("");
  const [partnerUsernameError, setPartnerUsernameError] = useState(false);
  const [partnerToken, setPartnerToken] = useState("");
  const [redirect, setRedirect] = useState(false);

  let propusername = props.location.state.username;

  useEffect(() => {
    console.log(
      "Imie:" +
        props.location.state.name +
        "Username:" +
        props.location.state.username
    );
    setUsername(props.location.state.username);

    const backAction = () => {
      props.history.push("/"); //wracamy do glownej
      return true; //musimy zreturnowac true -> patrz dokumentacja
    };

    const backHandler = BackHandler.addEventListener(
      //obsluga hardwarowego back buttona (tylko android)
      "hardwareBackPress",
      backAction
    );

    return () => backHandler.remove(); // przy odmontowywaniu
  }, []);

  const handleOnPress = () => {
    console.log("Partner username to find: " + partnerUsername);
    const ref = firebase.database.ref();
    var partnerToken;
    ref.child("usernames/" + partnerUsername).once("value", (snapshot) => {
      // jesli partner istnieje to wez jego token
      if (snapshot.exists()) {
        let data = snapshot.val();
        partnerToken = data.token;
        saveUserToDb(partnerToken);
      } else {
        setPartnerUsernameError(true);
        error = true;
      }
    });

    function saveUserToDb(partnerToken) {
      firebase
        .auth()
        .signInAnonymously()
        .then(() => {
          console.log("User signed in anonymously");

          firebase
            .database
            .ref("/users/" + firebase.auth().currentUser.uid)
            .update({
              id: firebase.auth().currentUser.uid,
              name: props.location.state.name,
              username: username,
              partnerUsername: partnerUsername,
              partnerToken: partnerToken,
            })
            .then(() => {
              console.log(
                "Data updated. and: username is: " +
                  username +
                  "partner topken is:" +
                  partnerToken
              );
              setPartnerToken(partnerToken);
              setRedirect(true);
            })
            .catch((error) => {
              console.error(error);
            });
        })
        .catch((error) => {
          if (error.code === "auth/operation-not-allowed") {
            console.log("Enable anonymous in your firebase console.");
          }

          console.error(error);
        });
    }
  };

  let [fontsLoaded] = useFonts({
    "GreatVibes-Regular": require("./assets/fonts/GreatVibes-Regular.ttf"),
  });
  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return (
      <View style={styles.container}>
        <Text style={[styles.textHeader, { fontFamily: "GreatVibes-Regular" }]}>
          Enter your partner username
        </Text>
        <TextInput
          style={styles.input}
          value={partnerUsername}
          onChangeText={(e) => {
            setPartnerUsername(e);
          }}
        />
        <TouchableHighlight onPress={() => handleOnPress()}>
          <Image source={require("./assets/arrowRight.png")} />
        </TouchableHighlight>

        {partnerUsernameError && (
          <Text style={{ color: "red" }}>
            Partner username is not valid. Please try again.
          </Text>
        )}
        {redirect && (
          <Redirect
            to={{
              pathname: "/HomeScreen",
              state: { username: propusername },
            }}
          />
        )}
      </View>
    );
  }
}

export default withRouter(Login);

const styles = StyleSheet.create({
  container: {
    display: "flex",
    alignItems: "center",
    paddingTop: "59%",
    height: "100%",
    backgroundColor: global.primaryColor,
  },
  textHeader: {
    color: global.secondaryColor,
    fontSize: 48,
    marginBottom: "10%",
    textAlign: "center",
  },
  input: {
    width: "75%",
    height: 60,
    color: global.secondaryColor,
    fontSize: 18,
    padding: 16,
    marginBottom: "45%",
    borderRadius: 100,
    borderWidth: 1,
    borderColor: global.secondaryColor,
  },
});

Odczytuję to w komponencie HomeScreen:

 useEffect(() => {
    console.log("LOCATION STATE:" + props.location.state.username);
  }, []);

Dziwne jest to, że gdy zmienną redirect w komponencie Login zmieniam defaultowo na true, wykonuje się redirect i mogę normalnie odczytać wartości. Jednak gdy zmienna jest ustawiona na false i zmieniam ją dopiero w funkcji SaveToDb to wartości zwracają undefined. Jaki może być tego powód bo kończą mi się pomysły?

Probowałem użyc hooka useLocation. Redirecta zamieniałem na props.history.push. Probowałem zmieniać lokalizację tego Redirecta w kodzie. Tak jak wspominałem wartości w HomeScreenie mogę odczytać tylko wtedy gdy redirect wykonuje się od razu, a nie jeśli jest robiony warunkowo. Routy w App.js wyglądają okej. Używam react native router do nawigacji.

Bardzo proszę o pomoc, nie daje mi spokoju ten problem :/

ukrywanie komponentu w react native

Sun, 08 Aug 2021 13:24:21 +0000

Witam,

Jak poprawnie w react / react native ukryć/skasować/zamienić komponent? Zalozmy sobie ze mam aplikacje w której mam 3 oddzielnie strony, chce przejść na inną stronę, tak więc chce zamienić główny komponent który zajmuje 80% ekranu (reszta to paski narzędzi itd.) na inny komponent.

Chodzi mi o dodanie takiej nawigacji w zasadzie, nie wiem jak to do końca poprawnie nazwać ani zrobić w react native

RN expo start => "internal/modules/cjs/loader.js:883 throw err; ^ Error: Cannot find module 'source-map-support'"?

Fri, 28 May 2021 09:18:33 +0000

React Native

expo start => zamiast uruchomienia lokalnego severa dla aplikacji => konsola wyświetla błąd:

" internal/modules/cjs/loader.js:883 throw err; ^ Error: Cannot find module 'source-map-support' "

Backend dla aplikacji mobilnej

Sun, 23 May 2021 08:25:05 +0000

Cześć.

Zamierzam zacząć projekt swojej aplikacji mobilnej. Sama aplikacja będzie "dzienniczkiem" treningowym, gdzie użytkownik będzie mógł utworzyć swój plan treningowy, wyliczać na jego podstawie swój progress etc.

Za główną technologię wybrałem React Native. Do tego potrzebuję jeszcze backendu, który zapisywałby wszelkie informacje w bazie danych.

Myślałem nad napisaniem api do komunikacji z bazą i wystawienie tego na jakimś darmowych hostingu, np. netlify. Drugą opcją jest podłączyć aplikację do firebase, ale nigdy z niego nie korzystałem, więc nawet nie wiem czy spełni on wymagania aplikacji.

Co wy byście wybrali? A może jakieś całkowicie inne rozwiązanie?

MER(native)N , ocena projektu

Wed, 16 Dec 2020 01:20:15 +0000

Siemka wszystkim! Chciałem wam przedstawić coś nad czym aktualnie pracuje, i zapytać się was o jakieś rady propozycje. Z technologiami wyżej podanymi: mongoose, express/node, react / native, mam do czynienia od dwóch miesięcy. Pierwszy miesiąc to była sztywna nauka poprzez kurs, cały czas napędzała mnie idea realizacji projektu który uznałem za fajny. Ogólnie pragnę zauważyć, że nie piszę tego wpisu tylko dla zaawansowanych. A pragnę zaznaczyć ile samozaparcie może dać. Oraz chciałbym usłyszeć waszą ocenę.

Idea projektu jest taka, oczywiście skopiowana z tego co słyszałem z revoluta ^_^ Aczkolwiek jest przeze mnie realizowana. Nie raz mi się zdarzyło pożyczyć komuś śmieszne pieniądze i o tym zapomnieć, czy też uznać że kwota jest o tyle śmieszna że po prostu potem kogoś poprosić o zwrot nie wypadało(A nie każdy jest na tyle życzliwy że bez przypomnienia zwróci, prawdopodobnie mogła ta osoba też zapomnieć). Więc wpadłem na pomysł zrealizowania aplikacji która będzie notować pieniądze które komuś pożyczam. Aby sobie trochę utrudnić postanowiłem zrobić aplikację którą z łatwością będę mógł rozszerzać. Stworzyć REST API, oraz po prostu z nim działać po stronie klienta.

Dobra kontynuując, bo urwałem wątek. Aplikacja nie dość że będzie notować pożyczki, to jeszcze jej zadaniem jest generowanie smsów z informacją o danej pożyczce. Lepiej! Aplikacja będzie miała zaimplementowanego CRONA, który będzie systematycznie wysyłał przypomnienia moim znajomym. Jeszcze lepiej! Aplikacja ma jeszcze w celach łączenie się z jakimś systemem płatnościowym, i ma umożliwić regulację długo przez wybraną przez użytkownika metodę płatności.

Cały projekt którym się chwale znajduje się pod tym linkiem: https://github.com/newadbie/BeFriendsApp/tree/%232/LoansSystem

Dodatkowym moim pytaniem jest teraz jedno, czy ma ktoś pomysł jakiej technologii mogę użyć do stworzenia takiego systemu płatnościowego? System nie musi działać na produkcji, chciałbym aby żeby odwzorowywał realne działania i interakcje z użytkownikiem. Wszystko było by tylko na platformie testowej, ponieważ ten projekt jest jednym większym projektem do mojego CV i więcej mi nie potrzeba, zwłaszcza że nakład finansowy na to nie pozwala (aplikacja z góry już wymaga kosztów ;/ )

Dzięki wam z góry ;) Pozdrawiam, i z chęcią odpowiadam na pytania!

SaveFood - aplikacja pomagająca oszczędzać żywność

Fri, 11 Dec 2020 16:20:24 +0000

Cześć, jakiś czas temu rozpoczęliśmy pracę nad autorską aplikacją mobilną realizowaną z wykorzystaniem takich technologii jak React Native, Expo i Node.js. Aplikacja jest już publicznie dostępna na platformie Google Play i Apple Store i byłbym bardzo wdzięczny za jej zainstalowanie i przetestowanie ( zgłaszanie błędów mile widziane :) ).

A teraz trochę o samym projekcie

Save Food, bo o tej aplikacji mowa, to projekt stworzony w celu ograniczenia marnowania żywności, jak i wspierania polskiej organizacji charytatywnej “Pajacyk”. Save Food zwraca uwagę użytkownikowi na to, jak dużo jedzenia marnuje i jakiego typu produktów powinien kupować mniej. Dzięki oszacowanej cenie zmarnowanych produktów użytkownik może przekazać wartość zmarnowanych produktów na akcję “Pajacyk” (lub jakąkolwiek inną organizację charytatywną wykonując samodzielnie przelew). Dodatkowo dzięki wbudowanemu skanerowi kodów kreskowych i integracji z międzynarodowym API użytkownik jest w stanie skanować zmarnowane produkty i w szybki sposób dodawać je do listy zmarnowanych.

Google Play:

https://play.google.com/store/apps/details?id=com.webStrong.saveFood

Apple Store:

https://apps.apple.com/app/save-food-app/id1520027228

Kod źródłowy na GitHub:

https://github.com/webstrongteam/save-food

Dodatkowo od pewnego czasu przyjmujemy zlecenia dotyczące realizacji stron internetowych lub aplikacji mobilnym na system android i iOS.

Więcej informacji można znaleźć tutaj: https://webstrong.pl/

Z góry dziękuję za pomoc i poświęcony czas :)

Maker - ToDo App, zaawansowana aplikacji do zarządzania zadaniami

Fri, 04 Dec 2020 15:35:44 +0000

Cześć, przez ostatnie dwa miesiące pracowałem nad aktualizacją autorskiej aplikacji mobilnej realizowanej z wykorzystaniem takich technologii jak React Native i Expo. Aktualizacja jest już publicznie dostępna na platformie Google Play i Apple Store i byłbym bardzo wdzięczny za jej zainstalowanie i przetestowanie ( zgłaszanie ewentualnych błędów/poprawek mile idziane :) ).

A teraz trochę o samym projekcie

Choć zabrzmi to dość banalnie mowa tutaj o aplikacji Maker, czyli To-Do liście. Nie jest to jednak prosta To-Do lista jaką można znaleźć w różnych kursach czy artykułach. Moim pomysłem na aplikację było zrealizowanie To-Do listy która spełni wszystkie moje wymagania, które stawiałem przed innymi typowo komercyjnymi aplikacjami tego typu. Maker oferuje system sortowania i wyszukiwania zadań, przydzielania im opisu, daty, godziny, powtarzalności, priorytetu i kategorii. Ponadto aplikacja oferuje dodatkowe opcje takie jak zarządzanie już istniejącymi kategoriami, śledzenie statystyk swojego konta, dostosowywania kolorystyki i funkcji aplikacji czy tworzenia backupów.

Maker powstał przede wszystkim w celach nauki React Native jednak dziś przerodziła się w coś znacznie większego, w jeden z moich największych prywatnych projektów opartych na RN.

Google Play:

https://play.google.com/store/apps/details?id=com.webStrong.maker

Apple Store:

https://apps.apple.com/us/app/maker-todo-list/id1502811101

Kod źródłowy na GitHub:

https://github.com/webstrongteam/maker

Dodatkowo od pewnego czasu przyjmuję zlecenia dotyczące realizacji stron internetowych lub aplikacji mobilnym na system android i iOS.

Więcej informacji można znaleźć tutaj: https://webstrong.pl/

Z góry dziękuję za pomoc i poświęcony czas :)

React Native

Fri, 13 Nov 2020 14:31:45 +0000

Witam, zaczynam naukę z react native mam pytanie czy da się ustawić czcionkę z google fonts a jeśli tak to jak.

React native, prosta aplikacja laguje na androidzie

Wed, 14 Oct 2020 18:49:02 +0000

Witam, chcę zrobić swoją pierwszą aplikację w react native. Odpalam ją przez expo i zauważyłem spore lagi przy czynnościach typu wpisywanie liter w inputach, przy scrollowaniu, czy klikaniu buttonów. No generalnie cała aplikacja zacina.

Od razu mówię, nie jest to wina kodu bo przy tworzeniu nowego projektu laguje nawet defaultowy kod aplikacji. Tutaj właśnie on delikatnie zmieniony:

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View, TextInput } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Home</Text>
      <TextInput style={styles.searchInput} />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    paddingTop: 20,
  },
  searchInput: {
    marginTop: 200,
    borderWidth: 1,
  },
});

aktualizowałem expo-cli, wyłączyłem remote debug i próbowałem odpalić na ios'ie (tam jest ok, czyli problem jest tylko na androidzie, bądź moim telefonie(?)).

Zauważyłem też, że usuwając <StatusBar> po automatycznym refreshu status bar robi się czarny, tak jakby odseparowany od aplikacji i aplikacja działa tak jak powinna, bez lagów. Jednak to chyba jakiś bug bo po manualnym refreshu status bar ponownie przybiera kolor backgroundu i aplikacja zacina.

Coś pominąłem, coś robię źle, czy o co chodzi bo już nic nie rozumiem dlaczego tak się dzieje?

Z góry dziękuje za pomoc :)

React Native - Expo AV. setOnPlaybackStatusUpdate nie widzi zmian stanu w hookach

Mon, 24 Feb 2020 12:23:25 +0000

Mam kod odtwarzacza audio. Ma on m.in. mieć przycisk odtwarzania w pętli więc w momencie zakończenia odtwarzania pliku, chcę ustawić pozycje odtwarzania na 0, ale tylko w momencie kiedy przycisk pętli jest włączony. Mam jednak taki problem, że funkcja wysyłana do Audio.Sound.setOnPlaybackStatusUpdate z expo-av nie widzi zmianu stanu przez setInLoop. Czyli komponent się ładuje, inLoop jest równy false. Naciskam przycisk, inLoop jest równy true, ale funkcja przekazana do setOnPlaybackStatusUpdate, która wykonuje się co chwile loguje, false. Dlaczego, false a nie true, i jak to naprawić?

import React, { useState, useEffect, useRef } from 'react';
import { Audio } from 'expo-av';
import { Text } from 'react-native';

function Player() {
  const [inLoop, setInLoop] = useState(false);
  const sound = useRef<Audio.Sound | undefined>();

  useEffect(() => {
    sound.current = new Audio.Sound();
    sound.current
      .loadAsync({ uri: 'https://www.thesoundarchive.com/starwars/yoda_twisted.mp3' })
      .then(() => {
        sound.current?.playAsync();
      });

    sound.current.setOnPlaybackStatusUpdate(() => {
      console.log(inLoop);
    });

    return () => {
      sound.current?.stopAsync();
    };
  }, []);

  return <Text onPress={() => setInLoop(true)}>CHANGE - {inLoop + ''}</Text>;
}

Czy React Native pod strony internetowe?

Sat, 22 Feb 2020 10:59:29 +0000

Dzień dobry!

Chciałbym wiedzieć czy za pomocą frameworka React Native da się zbudować fajne strony internetowe. Za bardzo w web świecie nie siedzę, dlatego też pytam, bo słyszałem, że to framework bardziej pod gry mobilne.

Taki C++ też jest "pod gry", natomiast nigdy w tym języku gier nie piszę i właśnie się zastanawiam, czy framework React Native też może mieć wiele zastosowań (no, szczegolnie myślę o stronie internetowej).

Póki co, jestem trochę laikiem jeżeli chodzi o frameworki i wielu rzeczy jeszcze nie wiem.

Z góry dziękuję za pomoc :)

React Redux a React Native

Sat, 31 Aug 2019 08:32:56 +0000

Cześć.

Mam pytanie zaczynam się uczyć React Native.I zastanawiam się na czym to polega.W sensie czy jak mam napisaną już aplikacje na React Redux to jak to teraz miało by wyglądając z React Native.W sensie czy to muszę pisać od nowa bo to osobna biblioteka czy jak ?

React a React Native

Mon, 26 Aug 2019 10:30:38 +0000

Cześć.

Nasunęło mi się pytanie na , które nie mogę znaleźć odpowiedzi.Otóż jaka jest różnica miedzy w tworzeniu projektu na React i React Native jak to wygląda tak od podszewki ? I czy jeśli mam projekt już napisany w samym React to mogę to zmodyfikować na React Native ?

Maker - ToDo app, czyli coś więcej niż prosta To-Do lista

Sun, 14 Jul 2019 13:49:39 +0000

Cześć, przez ostanie dwa miesiące pracowałem nad własnym projektem aplikacji mobilnej realizowanej dzięki React Native i Expo Framework. Wreszcie udało mi się skończyć pierwszą wersję produkcyjną i można ją już przetestować na własnym urządzeniu z system Android.

Aplikacja ta powstała przede wszystkim w celach nauki React Native jednak dziś przerodziła się w coś znacznie większego, w jeden z moich największych prywatnych projektów.

Aplikację można pobrać tutaj: https://play.google.com/store/apps/details?id=com.webStrong.maker
Kod źródłowy jest dostępny tutaj: https://github.com/mateuszpijanowski/maker

Jeżeli ktoś poświęciłby chwilę na sprawdzenie tej aplikacji, to byłbym bardzo wdzięczny i jednocześnie zachęcam do dzielenia się swoimi pomysłami na przyszłe nowości i opiniami dotyczącymi aktualnej wersji :)

*Byłbym także wdzięczny za screeny wyglądu aplikacji na różnych urządzeniach.

Pozdrawiam i dziękuję, Mateusz :)

Native Vue odpala app.js zamiast app.vue

Fri, 05 Jul 2019 23:00:11 +0000

Hej,

Zacząłem uczyć się tworzenia natywnych apek za pomocą Vue.JS'a. Pojawił się pewnie problem na starcie któego nie mogę rozwiązać. Przy tworzeniu projektu, w folderze pojawia się plik App.js i to właśnie on jest uruchamiany. Robiłem wszystko dokładnie krok po kroku jak w kursie. Dla nauczyciela nie pojawia się ten plik i jest uruchamiane app.vue.

Po usunięciu app.js, aplikacja uruchamia się z pliku app.vue ale sypie także błędem.

Warning: ImageStore is deprecated and will be removed in a future release. To get a base64-encoded string from a local image use either of the following third-party libraries:* expo-file-system: `readAsStringAsync(filepath, 'base64')`* react-native-fs: `readFile(filepath, 'base64')`

Czy ktoś może wiej jak rozwiązać owy problem ?

React Native paczka do nawigacji

Wed, 19 Jun 2019 18:19:19 +0000

Witam!

Kupiłem kurs na Udemy odnośnie React Native https://www.udemy.com/react-native-the-practical-guide/ I mam pytanie na temat navigacji ponieważ w tym kursie jest powiedziane że paczka react-navigation nie działa stabilnie i należy używać paczki react-native-navigation w wersji 1 czyli https://github.com/wix/react-native-navigation. Czy ktoś się może jakoś wypowiedzieć na ten temat? Czy może to zostało w kursie powiedziane ponieważ w momencie tworzenia kursu paczka nie działała stabilnie?

Mobile App Development

Wed, 22 May 2019 12:35:03 +0000

Programuje głównie w javascript(react) i chciałbym zaczać bawić się z mobile apps.

Do wyboru z tego co wiem jest kotlin na android, swift na mac os oraz react native i flutter które są na obie platformy.

Który sposób tworzenia aplikacji z wyżej wymienionych jest najlepszy do rozpoczęcia nauki i dlaczego?

Biorąc pod uwagę że programuje w react to react native przychodzi do głowy jako pierwszy ale dart imo podobny do js'a i ma dobre resources do nauki.

React Native jaka książka

Wed, 24 Apr 2019 17:44:23 +0000

Witam,

Szukam jakiejś dobrej książki do React Native.

Od jakiegoś czasu uczę się tego frameworka, kilka małych, w miarę sensownych apek i jestem w trakcie pisania czegoś bardziej zaawansowanego(jak na moje obecne możliwości). Obecnie posiadam już książkę "React Native. Tworzenie aplikacji mobilnych w języku JavaScript" autorstwa Bonnie Eisenman, ale przydało by mi się lektura zawierająca coś więcej niż tylko podstawy.

Od razu odpowiem, na komentarze że nie opłaca się kupować książek do frameworków bo w internecie jest wszystko. Owszem zgadzam się z tym i oczywiście korzystam z tutoriali, dokumentacji czy różnego rodzaju forów, ale pomimo tego znacznie przyjemniej jest mi się uczyć z "papierowego źródła" i byłbym wdzięczy za polecenie jakiegoś.

Dodam że interesują mnie książki po polsku i po angielsku które można kupić z polskich stron(aliexpres, ebay itp. odpadają)

błąd Execution failed for task ':app:compileDebugJavaWithJavac'. konfiguracja react native

Sun, 24 Mar 2019 19:06:05 +0000

Próbuje zdebugowac wygenerowany kod mam zainstalowany android studio i zkonfigurowałem go odpowiednio takze w panelu sterowania ustawilem odpowiednia sciezke stworzyłem serwer i przy wpisaniu react-native run-android wyskakuje mi błąd Execution failed for task ':app:compileDebugJavaWithJavac'.Będe wdzięczny za wszystkie odpowiedzi.

Renderowanie obiektów jako komponenty - ReactNative

Wed, 02 Jan 2019 16:14:24 +0000

Witam wszystkich, natrafiłem na dość nową sytuację z którą już długo nie mogę sobie poradzić także zwracam się z problemem tutaj. Z backendu (firebase + node) otrzymuje przykładowe dane:

Object {
   "-LVAJKVhDR7tK5GDHVq-": Object {
     "description": "Task",
     "id": "1wem1vcjqe9llak",
     "name": "New",
   },
   "-LVAJP0oA6IvxXl3XWub": Object {
     "description": "Task",
     "id": "1wem1vcjqe9lzki",
     "name": "Next on",
   },
   "1wem7qgjqe9h4p2": Object {
     "description": "Task",
     "id": "1wem7qgjqe9h4p2",
     "name": "News",
   },
 }

Chciałbym na podstawie tego renderować komponenty w react-native. Zwykle robiłem to funkcją map ale miałem przy tym tablice, a w firebase niestety takie rozwiązanie nie wchodzi w grę.

Dodam też, ze nie wiem jakie będą klucze tych wartości, są generowane przez bazę.

React Native - Połączenie z baza danych SQlite

Wed, 22 Mar 2017 12:47:11 +0000

Witam. Czy ktoś może mi powiedzieć jak w react-native dokonać połączenia z bazą danych sqlite?

W ramach nauki zainstalowałem sobie tą bibliotekę https://github.com/andpor/react-native-sqlite-storage

i próbuję stworzyć bazę danych oraz dokonać jakichś operacji, ale niestety stoję w miejscu z tym samym błędem.

Mój kod wygląda w ten sposób:

constructor() {
    super();
    this.state = {
        countryName:'',
        progress:''
    };
    this.startDB();

}
startDB(){

        SQLite.openDatabase({name: 'test.db', createFromLocation : "~example.db", location: 'Library'}).then((DB) => {
            db = DB;
            this.setState({
                progress:this.state.progress+"Database OPEN"
            });
        }).catch(error => {
           console.log(error);
           this.setState({
                progress:error
            });

        });
}

createDB(){

    db.executeSql('CREATE TABLE IF NOT EXISTS countrys( '
        + 'country_id INTEGER PRIMARY KEY NOT NULL, '
        + 'name VARCHAR(30) )');
}
adValue(){
    db.executeSql('INSERT INTO countrys (name) VALUES ("Polska")');
}

showValue(){
    db.executeSql('SELECT name FROM countrys').then((results) => {
        let len = results.rows.length;
        for (let i = 0; i < len; i++) {
            let row = results.rows.item(i);
            this.setState({
                countryName:this.state.countryName+row.name,
            });
        }

    }).catch((error) => {
        console.log(error);
    });
};

render() {
    return (
        <View>
            <Button
                color={'royalblue'}
                onPress={this.createDB}
                title="Create DB"
            />
            <Button
                color={'orange'}
                onPress={this.adValue}
                title="Add"
            />
            <Button
                color={'brown'}
                onPress={this.showValue}
                title="Show"
            />

            <Text>{this.state.countryName}</Text>
            <Text>{this.state.progress}</Text>
        </View>
    )
}

 
AppRegistry.registerComponent('SqliteComponent', () => SqliteComponent);

Po uruchomieniu aplikacji i kliknięciu w kolejne przyciski otrzymuję w konsoli takie komunikaty:

03-22 13:55:55.248 3386 3545 I ReactNativeJS: OPEN database: test
.db
03-22 13:55:55.249 3386 3545 I ReactNativeJS: SQLite.open({"name"
:"test.db","createFromLocation":"~example.db","location":"Library",
"dblocation":"libs","assetFilename":"~example.db"})
03-22 13:55:56.531 3386 3545 I ReactNativeJS: SQLite.backgroundEx
ecuteSqlBatch({"dbargs":{"dbname":"test.db"},"executes":[{"qid":111
1,"sql":"SELECT 1","params":[]},{"qid":1111,"sql":"CREATE TABLE IF
NOT EXISTS countrys( country_id INTEGER PRIMARY KEY NOT NULL, name
VARCHAR(30) ); ","params":[]}]})
03-22 13:56:08.196 3386 3545 I ReactNativeJS: SQLite.backgroundEx
ecuteSqlBatch({"dbargs":{"dbname":"test.db"},"executes":[{"qid":111
1,"sql":"SELECT 1","params":[]},{"qid":1111,"sql":"INSERT INTO coun
trys (name) VALUES ("Polska")","params":[]}]})
03-22 13:56:11.047 3386 3545 I ReactNativeJS: SQLite.backgroundEx
ecuteSqlBatch({"dbargs":{"dbname":"test.db"},"executes":[{"qid":111
1,"sql":"SELECT 1","params":[]},{"qid":1111,"sql":"SELECT name FROM
countrys","params":[]}]})
03-22 13:56:11.051 3386 3545 I ReactNativeJS: { [TypeError: undef
ined is not an object (evaluating 'results.rows.length')]
03-22 13:56:11.051 3386 3545 I ReactNativeJS: line: 76888,
03-22 13:56:11.051 3386 3545 I ReactNativeJS: column: 21,
03-22 13:56:11.051 3386 3545 I ReactNativeJS: sourceURL: 'http:
//10.0.2.2:8081/index.android.bundle?platform=android&dev=true&hot=
true&minify=false' }
03-22 13:57:06.646 3386 3545 I ReactNativeJS: 'Setting debug to:'
, true
03-22 13:57:06.646 3386 3545 I ReactNativeJS: Promise based runti
me ready
03-22 13:57:06.646 3386 3545 I ReactNativeJS: [React Transform HM
R] Patching SqliteComponent

Niestety nigdy wcześniej nie pracowałem z bazą danych SQlite więc jest to dla mnie nowum.

Jeśli dobrze rozumiem polecenie openDatabase stworzy plik jeśli nie istnieje. Chyba że muszę go wcześniej jakoś sam stworzyć?

Czy ktoś może spojrzeć na kod i powiedzieć dlaczego to nie działa?

Dziękuję