How do I use realm with react-native correctly? - android

I have a "small" problem trying to use realm in combination with my react-native app.
I just started with react native and I have installed and updated everything I need for development.
I installed first realm with the command
npm install realm
after that I followed the tutorial given by MongoDB.
But all I get is this error:
Unexpected identifier 'realm'. Expected ';' after variable declaration
After that I tried to look at a template provided by #realm/react.
I installed it and started to build the aplication on my phone via react-native run-android
But I get the exact same error without changing anything.
does realm only work with a specific version of react-native?
or am I doing somthing wrong?
I am getting that error even by just declaring a scheme.
import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity,ScrollView, Image, Alert } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator, TransitionPresets, CardStyleInterpolators } from '#react-navigation/stack';
import { Icon, Button } from "#rneui/themed";
import { styles } from './CSS/style';
import Realm from "realm";
const TaskSchema = {
name: "Task",
properties: {
_id: "int",
name: "string",
status: "string?",
},
primaryKey: "_id",
};

Related

React native RecordScreen Native Module is null

I want to use RecordScreen NativeModule in my react native app.
import {NativeModules} from 'react-native'
console.log(NativeModules) // This is empty {}
console.log(NativeModules.RecordScreen) // This is null
Currently I'm testing on android device yarn android build.
What is the reason for NativeModules is empty and NativeModules.RecordScreen is null ?
import {requireNativeComponent} from 'react-native';
const RecordComponent = requireNativeComponent('RecordComponent')
console.log(RecordComponent);
Try this instead
or if you wish to use the same one you can also do it like this:
import NativeModules from 'react-native'

Material Ui - Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function

When I am loading this LoginScreen.js I m getting the above mentioned exception.
Before that I had installed
npm install #material-ui/core
import React from 'react';
import {Button} from '#material-ui/core/Button';
import { View } from 'react-native';
export default function LoginScreen() {
return (
<View>
<Button></Button>
</View>
);
}
You need to import differently. Try as the following:
import Button from '#material-ui/core/Button';
// or
import { Button } from '#material-ui/core';
Check from the official documentation here: Button API - Import.
I hope this helps!

Unable to resolve module `react-navigation'

native. I want to active StackNavigator in App.js file. Please note my App.js file in different folder named 'app' and under app there is components folder under this I want to make all component file. here is my App.js
import React, { Component } from "react";
import { StackNavigator } from "react-navigation";
import Attendence from "./components/Attendence";
const Application = StackNavigator(
{
Home: { screen: Attendence }
},
{
navigationOptions: {
header: false
}
}
);
export default class App extends React.Component {
render() {
return <Application />;
}
}
As you said you have downloaded an old project ! it means you are about to tackle different node dependency packages errors on the route to get it running!
My tips to get your self saved from errors are like this
1: go into the package.json
2: note down every dependency names and versions
(the reason why to do that is simple ! you gonna need some awesome code that were in old version is now deprecated in new versions of those libs running!) so installing old ones would help you with that
3: if the point 2 does not work! please do check the version number of react native that you have and the one the real coder of the app used! and install the older version of react native in newer version there are some new things than old versions!
PRO TIP::: USE YARN
instead of NPM to save your self from the problems!

redux-persist cannot process cyclical state in bundled android apk

I've been working on a react-native app and have been running it on both IOS and Android simulators as well as on devices in debug mode.
I've packaged it and signed release versions in preparation for putting into the app store and play stores.
The IOS version seems to work fine, but the Android apk gives me the following error:
"redux-persist: cannot process cyclical state. Consider changing your state structure to have no cycles. Alternatively blacklist the corresponding reducer key. Cycle encountered at key "/feed" with value "[object Object]"."
Can anyone tell me what this means and how to fix it?
I'm using redux-persist and ex-navigation for routing in my main app file as follows:
<Provider store={ store }>
<NavigationProvider context={ navigationContext }>
<StackNavigation id="root" navigatorUID="root" initialRoute={ Router.getRoute('splash') } />
</NavigationProvider>
</Provider>
and my init-store file:
import { AsyncStorage } from 'react-native';
import { createStore, applyMiddleware, compose } from 'redux';
import { createNavigationEnabledStore } from '#exponent/ex-navigation';
import thunkMiddleware from 'redux-thunk';
import devTools from 'remote-redux-devtools';
import { persistStore, autoRehydrate } from 'redux-persist';
import rootReducer from './reducers/';
const createStoreWithNavigation = createNavigationEnabledStore({
createStore,
navigationStateKey: 'navigation'
});
export function initStore (initialState) {
return createStoreWithNavigation(
rootReducer,
initialState,
compose(
applyMiddleware(thunkMiddleware),
autoRehydrate({ log: true }),
devTools()
)
);
}
error

react-native import component from another component

i have project in react-native and its ok , my problem is when i tried to import component in another component its failed but when import at index.android.js its ok why ??
index.android.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
ToastAndroid,
ListView,
Navigator,
} from 'react-native';
import LoginView from './App/LoginView';
its ok but when tried to import the same in another screen like this
import React, { Component } from 'react';
import {
StyleSheet,
ToolbarAndroid
,AppRegistry,
View,
Text,
TouchableHighlight,
TextInput,
ListView,ActionButton,
Image
} from 'react-native';
import LoginView from './App/LoginView';
export default class MyOrders extends Component
{
i got this error , "Ruquring unknown module if you are sure the module is there try to restarting the packeger or running npm install" ????
Possible cause may be relative path('./App/LoginView') could be wrong with respect to the component while importing.Try updating the relative path accordingly.After updating stop the react-native dev server and again start it using react-native start.
Let us consider that you are importing AboutUs page in index.ios.js
by using the following
var AboutUs = require('./Views/AboutUs');
AboutUs.js is located in "Views" directory which is located in place where index.ios.js page located. And in AboutUs.js page you have to export the component by
module.exports = AboutUs;
Where,
class AboutUs extends Component {
.....
}

Categories

Resources