There is a Event component in my RN (0.59.9) app. Here is the constructor part of the code:
import React, { Component} from 'react';
import { SectionList, View, Image, StyleSheet, Text, TouchableOpacity, Platform, TouchableHighlight, AppRegistry } from 'react-native';
import {Icon } from "react-native-elements";
import DeviceInfo from 'react-native-device-info';
import helper from "../../lib/helper";
import GLOBAL from "../../lib/global";
export default class Event extends React.Component {
static navigationOptions = {
title: 'Events',
};
constructor(props) {
super(props);
this._isMounted = true;
console.log("props in Event : ", this.props);
this.state = {
activeEvents: [],
user: this.props.myself,
token: this.props.token,
group_id: this.props.group_id,
};
this._onPress = this._onPress.bind(this);
};
.......
I would like to insert a icon link into title area to the right. The icon link links to another component called Group with react navigation.
Here is how to add a button in title:
https://reactnavigation.org/docs/en/header-buttons.html
Related
Getting Error that reactreactNavigation.StackNavigator is not a function?
I have 4.4.0 version of react navigation installed.
My github is https://github.com/ganiya/ColorfulThrills if you want to see all of the codes
researched but what i've found online doesn't seem to apply to my issue
import React from 'react';
//import { Text, View, StyleSheet, ImageBackground, Image, Button } from 'react-native';
import { StackNavigator} from 'react-navigation';
import Books from './components/Books';
import Home from './components/Home'
const Navigator = StackNavigator({
Home:{screen:Home},
Books: { screen: Books }
});
class App extends React.Component {
render() {
return (
<Navigator />
);
}
}
export default App;
You must use import { createStackNavigator } from 'react-navigation-stack'
Import it from yarn add react-navigation-stack
Hello i got a problem using react native component Linking for show something at the browser, the problem is when i get value from axios response data.
my code :
'use strict';
import React, {
Component
} from 'react';
import {
View,
BackHandler,
Platform,
StatusBar,
SafeAreaView,
ScrollView,
StyleSheet,
Image,
Text,
AsyncStorage,
TouchableOpacity,
TextInput,
Modal,
Linking,
WebView
} from 'react-native';
export default class Pay extends Component {
constructor(props){
super(props)
this.state = {
data: {}
}
}
getUrlPay(){
axios{
...
if(response.data == "success"){
this.setState({
data: response.data.data
})
}
}
}
render(){
return(
<TouchableOpacity onPress={() => Linking.openUrl(this.state.data.url)}>
<Text>OpenPay</Text>
</TouchableOpacity>
)
}
}
Error is undefined is not an object
my response value is "https://something.com".
Any solution?
this seems to be a common problem with react navigation once they updated their API
looked at Fix Error: The component for route 'Home' must be a React component
neither profile nor camera components want to load into this tabNavigator. Any suggestions?
Camera.js
import React, { Component } from 'react';
class Camera extends Component {
render() {
return (
<Text>Camera</Text>
);
}
}
export default Camera;
InstaClone.js
import React, { Component } from 'react'
import { View, StyleSheet} from 'react-native'
import Camera from './components/screens'
import {MainFeed, Login, Profile} from './components/screens'
import { createBottomTabNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation'
const Tabs = createBottomTabNavigator({
feed: MainFeed,
Camera: Camera,
profile: Profile
});
const MainStack = createAppContainer(createSwitchNavigator({
login: Login,
main: Tabs
}));
const MainStack = createAppContainer(Tabs);
class InstaClone extends Component {
render() {
return <MainStack/>
}
}
export default InstaClone;
I am trying to create a tab navigator from an array. I want the the tab navigator to have one tab for each item in the array. In this way, if the array is updated by user input, the tabs will update.
Here's what I have so far; I'm having trouble creating the appropriate RouteConfigs object by mapping the array.
import React, {Component} from 'react';
import { ListView, Platform, StyleSheet, Text, View, Switch, TouchableOpacity, TextInput, Button, SafeAreaView } from 'react-native';
import { createStackNavigator, createMaterialTopTabNavigator } from 'react-navigation';
class GroupScreen extends Component {
render() {
return (
<View>
<Text>`${this.props.name}`</Text>
</View>
);
}
}
let groups = ['Group1', 'Group2']
let screens = groups.map((group) => ({
group: { screen: GroupScreen(name = group) },
}))
export default createMaterialTopTabNavigator(screens);
Getting this error (pictured below). New to react-native and learning how to use the StackNavigator. I believe it has something to due with export/imports but been stuck on this for a while. Thank you.
index.js file
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('RNIntroduction', () => App);
App.js file
import React, { Component } from 'react';
import {Platform, StyleSheet, Text, View, AppRegistry} from 'react-native';
import {StackNavigator} from 'react-navigation';
import LoginScreen from './app/views/LoginScreen';
import HomeScreen from './app/views/HomeScreen';
export default class App extends Component {
render() {
return (
<Screens/>
);
}
}
const Screens = StackNavigator({
LoginScreen: {screen: LoginScreen},
HomeScreen : {screen: HomeScreen}
})
LoginScreen.js
import React, { Component } from 'react';
import {Text, View, StyleSheet} from 'react-navigation';
export default class LoginScreen extends Component {
render() {
return (
<View>
<Text> This is Login Screen </Text>
</View>
);
}
}
My HomeScreen.js looks the same way as the LoginScreen.js. I also included a pic the error itself.
Change import statement LoginScreen.js to
import {Text, View, StyleSheet} from 'react-native';