I have use react-native-photo-editor library to design the image, When I open the app I'm getting this alert automatically.
here is my code and screenshot.
import React, { Component } from 'react';
import { RNPhotoEditor } from 'react-native-photo-editor';
import RNFS from 'react-native-fs';
export default class App extends Component {
componentDidMount() {}
render() {
return RNPhotoEditor.Edit({
path: RNFS.DocumentDirectoryPath + '/image.jpg'
});
}
}
Just I have rendered the element with View tag the alert gone and app working
Related
I know native-base in a wrapper on react-native library but there are some components which we can import from react-native as well as from native-base also eg., View, Text, etc., Is there any difference between these two imported components. I am new to react native just want to know.
Native Base uses the original react native view and extends it a little bit.
Here is the full code from native base' view:
import React, { Component } from "react";
import PropTypes from "prop-types";
import { View, ViewPropTypes } from "react-native";
import { connectStyle } from "native-base-shoutem-theme";
import mapPropsToStyleNames from "../utils/mapPropsToStyleNames";
class ViewNB extends Component {
render() {
return <View ref={c => (this._root = c)} {...this.props} />;
}
}
ViewNB.propTypes = {
...ViewPropTypes,
style: PropTypes.oneOfType([
PropTypes.object,
PropTypes.number,
PropTypes.array
])
};
const StyledViewNB = connectStyle(
"NativeBase.ViewNB",
{},
mapPropsToStyleNames
)(ViewNB);
export { StyledViewNB as ViewNB };
Source: https://github.com/GeekyAnts/NativeBase/blob/master/src/basic/View.js
I diagnosed more in this and got chain react and kitchen slink which gives more clarity about every component
https://github.com/GeekyAnts/NativeBase
I've started learning React Native with Redux and I'm building a simple login with Google and Facebook login which I want to sent to a Parse backend on AWS.
I have the following Facebook Button Component:
import { Button } from 'react-native';
import { connect } from 'react-redux';
import React, { Component } from 'react';
import { LoginManager } from 'react-native-fbsdk';
import { createUser } from '../actions';
class FacebookButton extends Component {
facebookButtonPressed(){
this.props.createUser("dummyemail#gmail.com","12345");
}
render() {
return (
<Button
onPress={this.facebookButtonPressed.bind(this)}
title="Sign In with Facebook"
color="#000000"
/>
);
}
}
export default connect(null,{ createUser })(FacebookButton);
I haven't done any Facebook integration yet, I just want to see if I can create a parse user. This is the action I'm using:
import Parse from 'parse/react-native';
export const createUser = (email, name) => {
return (dispatch) => {
var user = new Parse.User();
user.set("username", "my name");
user.set("password", "my pass");
user.set("name",name);
user.set("email", email);
// other fields can be set just like with Parse.Object
user.set("phone", "415-392-0202");
user.signUp(null, {
success: function(user) {
// Hooray! Let them use the app now.
console.log("User created");
},
error: function(user, error) {
// Show the error message somewhere and let the user try again.
alert("Error: " + error.code + " " + error.message);
}
});
}
};
When I run the debugger in the browser, I'm able to see that the createUser is called and when we call user.signUp I get the following error:
undefined is not an object (evaluating 'reactNative.AsyncStorage.getItem')
When I read the Parse Javascript docs and try the following:
//Get your favorite AsyncStorage handler with import (ES6) or require
import { AsyncStorage } from 'react-native';
//Before using the SDK...
Parse.setAsyncStorage(AsyncStorage);
I call the Parse.setAsyncStorage(AsyncStorage); in the code below.
import ReduxThunk from 'redux-thunk';
import reducers from './src/reducers';
import Parse from 'parse/react-native';
import { Provider } from 'react-redux';
import Login from './src/screens/Login';
import React, { Component } from 'react';
import { AsyncStorage } from 'react-native';
import { createStore, applyMiddleware } from 'redux';
export default class App extends Component {
componentWillMount() {
Parse.initialize("MY KEY");
Parse.serverURL = 'MY URL';
Parse.setAsyncStorage(AsyncStorage);
}
render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
return (
<Provider store={store}>
<Login />
</Provider>
);
}
}
I get an error of reactNative2.default.setAsyncStorage is not a function. Frankly I tried Parse.setAsyncStorage(AsyncStorage); in hopes of this fixing the AsyncStorage issue mentioned above.
So any ideas as to why I get the funny AsyncStorage error message when trying to create a Parse user?
I'm leaving an answer here in case someone else stumbles across any other issues. The problem was the version of Parse I was using. I was using Parse version 1.6.14. Steps to fix:
Open the package.json file and update your Parse version to any version above 1.11, for me 1.11.1 worked.
In the terminal: npm install
this should fix the issues mentioned above, bear in mind that you have to implement:
//Get your favorite AsyncStorage handler with import (ES6) or require
import { AsyncStorage } from 'react-native';
//Before using the SDK...
Parse.setAsyncStorage(AsyncStorage);
as per documentation.
Our React Native Project, uses react-navigation Stack navigator. It perfectly running in Android but in ios it gives an error which "Raw Text must be wrapped in an explicit " When we try to navigate between Page.
In ios only first page loading. For example, Default 'Main Page' is the first page in order so android and ios emulator both open the first page. Then if we try to navigate between them in android navigaton works but in ios we get "Raw text Error".
And if we change firs page of stack navigator ios also loaded first page correctly but not navigate between them as expected.
We think navigated pages may be problem, so we create a blank page and navigate to there, but issue still continue in iOS.
I am really glad to hear suggestions.
This is how we navigate between pages:
this.props.navigation.navigate('ProfileSayfa');
This is our index.android.js and also index.android.ios:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import {StackNavigator,DrawerNavigator } from "react-navigation";
import LoginPage from "./src/pages/login-page/login-page";
import MainPage from "./src/pages/main-page/main-page";
import MekanAraSonuc from "./src/pages/MekanAra/MekanAraSonuc";
import MekanAra from "./src/pages/main-page/tabs/mekan_ara";
import NewsTab from "./src/pages/main-page/tabs/news-tab";
import StartPage from "./src/pages/start-page/start-page";
import AllMekan from "./src/pages/AllMekan/AllMekan";
import MekanSayfa from "./src/pages/MekanSayfa/MekanSayfa";
import RezervasyonSayfa from "./src/pages/MekanSayfa/RezervasyonSayfa";
import FirsatSayfa from "./src/pages/MekanSayfa/FirsatSayfa";
import EtkinlikSayfa from "./src/pages/MekanSayfa/EtkinlikSayfa";
import ProfileSayfa from "./src/pages/MekanSayfa/ProfileSayfa";
import EtkinlikSonuc from "./src/pages/AllMekan/EtkinlikSonuc";
import FirsatlarSonuc from "./src/pages/AllMekan/FirsatSonuc";
import IconME from 'react-native-vector-icons/FontAwesome';
import Drawer from "./src/pages/MyComponents/Drawer";
import SearchForm from "./src/pages/MyComponents/SearchForm";
import RezervasyonForm from "./src/pages/Forms/RezervasyonForm";
import FirsatForm from "./src/pages/Forms/FirsatForm";
import CalendarListView from "./src/pages/Forms/CalendarListView";
export default class moreAwesome extends Component {
render() {
return (
<LoginApp
ref={nav => {
this.navigator = nav;
}}
/>
);
}
}
const LoginApp = StackNavigator({
MainPage: {
screen: MainPage,
},
LoginPage: { screen: LoginPage },
MekanAraSonuc:{screen:MekanAraSonuc},
MekanAra:{screen:MekanAra},
NewsTab:{screen:NewsTab},
AllMekan:{screen:AllMekan},
MekanSayfa:{screen:MekanSayfa},
FirsatSayfa:{screen:FirsatSayfa},
EtkinlikSayfa:{screen:EtkinlikSayfa},
EtkinlikSonuc:{screen:EtkinlikSonuc},
FirsatlarSonuc:{screen:FirsatlarSonuc},
ProfileSayfa:{screen:ProfileSayfa},
RezervasyonSayfa:{screen:RezervasyonSayfa},
SearchForm:{screen:SearchForm},
RezervasyonForm:{screen:RezervasyonForm},
FirsatForm:{screen:FirsatForm},
CalendarListView:{screen:CalendarListView},
});
AppRegistry.registerComponent('myproje', () => moreAwesome);
Apperantly, when you create static Navigation Options for an page, "title" can be empty string in Android but not on iOS.
When we change this,
static navigationOptions = ({ navigation }) => {
return {
title: '',
};
};
To this:
When we change this,
static navigationOptions = ({ navigation }) => {
return {
title: ' ',
};
};
And Also be careful intial page gives this error not target page!
This is my first go at using MobX so this may be a simpler problem than I imagine, but I'm not getting any errors with the things I've tried; the store is simply undefined wherever I try to use it. I've tried both importing the store directly into components and passing props from the main file (also with , but I'm not sure if I used that right). I've experimented with several different .babelrc file settings as well, but that doesn't seem to be an issue.
Here is the UserStore:
import React from 'react';
import { observable } from 'mobx';
class UserStore {
#observable info = {
username: "bob",
password: "secret",
email: "bob#email.com"
}
}
const userStore = new UserStore()
export default userStore;
Here is a simplified App.js:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Profile from './app/Profile.js';
import { UserStore } from './app/UserStore.js';
export default class App extends Component {
constructor(){
super();
this.state = {
page: 'Profile',
}
}
changePage(){
switch (this.state.page) {
case "Profile":
return <Profile logout={this.logout.bind(this)} userStore={UserStore}/>;
}
}
render() {
return (
<View>
{this.changePage()}
</View>
);
}
}
And here is a simplified Profile.js:
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { observer } from 'mobx-react/native';
#observer
export default class Profile extends Component {
render() {
console.log(this.props.userStore);
return (
<View>
<Text>Profile Page</Text>
<Text>username: {props from store go here}</Text>
<Text>password: {props from store go here}</Text>
<Text>email: {props from store go here}</Text>
</View>
);
}
}
All I'm trying to do right now is get the pre-defined observable "info" object from the store to the Profile.js component and display that information. This is being way more difficult than it should be - any insight is greatly appreciated!
Since you declared export default userStore; in UserStore.js
Try changing the way you import in App.js by removing the {}:
import UserStore from './app/UserStore.js';
{} is needed only if you want to do a named import. Here is a good read if you want to know more.
I'm trying to use react-native-navigation as navigation system in my react-native. I've wrote a very simple app for test it, but this app crashes(without giving me any error or info) after the splash screen.
my index.ios.js:
/* eslint-disable no-unused-vars */
import App from './src/app';
my app.ios.js:
import {
Platform
} from 'react-native';
import {Navigation} from 'react-native-navigation';
import { registerScreens } from './screens';
registerScreens(); // this is where you register all of your app's screens
// this will start our app
Navigation.startTabBasedApp({
tabs: [{
label: 'One',
screen: 'AwesomeProject.Home', // this is a registered name for a screen
icon: require('../img/one.png'),
selectedIcon: require('../img/one_selected.png'), // iOS only
title: 'Screen One'
}]
});
my screens.js
import { Navigation } from 'react-native-navigation';
import Home from './containers/Home';
import About from './containers/About';
// register all screens of the app (including internal ones)
export function registerScreens() {
Navigation.registerComponent('AwesomeProject.Home', () => Home);
Navigation.registerComponent('AwesomeProject.About', () => About);
}
my Home.js:
import React, { Component } from 'react';
import { Text } from 'react-native';
class Home extends Component {
render() {
return (
<Text>Home!</Text>
);
}
}
export default Home;
my About.js:
import React, { Component } from 'react';
import { Text } from 'react-native';
class About extends Component {
render() {
return (
<Text>About!</Text>
);
}
}
export default About;
You can see a full gist here: https://gist.github.com/inchr/d0184f4ae91abd6036a2fa61725744c9
I've done very test on how loads the tabs in startTabBasedApp() and I've tried to load only a screen too.
Any idea on the reason of the crash/close after the splash screen ?
Thanks.
Ok the problem was that after I've run: react-native link
I've forgot to edit the AppDelete.m file as explained here:
https://github.com/wix/react-native-navigation/wiki/Installation---iOS#installation---ios
https://github.com/wix/react-native-navigation/blob/master/example/ios/example/AppDelegate.m