Im attempting to follow the Native Base tutorial found in the docs.
https://nativebase.io/docs/v0.1.0/components
As soon as I try to add the toolbar I get the below error. The toolbar component does not seem to be in the package. Does anyone know if the documentation for Native Base is good?
import React, { Component } from 'react'
import { Container, Toolbar, Button, Text, Content, View } from 'native-base';
import Icon from 'react-native-vector-icons/Ionicons';
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
}
}
render() {
return (
<Container>
<Toolbar></Toolbar>
<Content>
<View>
<Text>Works! And some</Text>
</View>
</Content>
</Container>
)
}
}
Related
I made a small app in react-native and it won't recognize this.props. Here is the code in let child = this.props.children;
I have searched a lot of tutorials but didn't find a solution
import React,{Component} as react from 'react';
import {
StyleSheet,
View,
TouchableHighlight,
Dimensions,
Animated,
Image,
} from 'react-native';
class TabItem extends Component{
constructor(props) {
super(props);
}
render() {
let child = this.props.children;
return (
// Code omitted
);
}
}
Search where are you rendering the component TabItem and then pass props from there as : <TabItem {...this.props}
I am not sure what you mean by "it won't recognize this.props". I am assuming you get undefined for this.props.children. if that's the case, make sure your TableItem component has children and props are passed correctly.
import React, { Component } from 'react';
class TabItem extends Component{
render(){
return <div> {this.props.children} </div>
}
}
const table = ()=><TabItem>Children</TabItem>
ReactDOM.render(<table />, document.getElementById('root'));
I have 2 component parent(LoginScreen) and a child(SignupSection). Child component have onClick button. When user click button I need to fire childcall() function from the parent component and this is not working for me. I get this Error
_this.props.childcall is not a function.
(In '_this2.props.childcall()' is undefined)
I have the following code:
Parent
import React, {Component} from 'react';
import Wallpaper from './Wallpaper';
import SignupSection from './SignupSection';
export default class LoginScreen extends Component {
constructor(props) {
super(props)
}
childcall()
{
alert("hello , this call from child component");
}
render() {
return (
<Wallpaper>
<SignupSection
childcall ={this.childcall.bind(this)}
/>
</Wallpaper>
);
}
}
Child
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {StyleSheet, View, Text} from 'react-native';
export default class SignupSection extends Component {
constructor(props) {
super(props)
}
componentWillMount()
{
}
render() {
return (
<View style={styles.container}>
<Text style={styles.text} onPress={()=>this.props.childcall()}>Create Account</Text>
<Text style={styles.text}>Forgot Password?</Text>
</View>
);
}
}
It doesn't work because you are rendering the function instead of passing it as a prop.
You are passing inside children prop
<SignupSection>
childcall={this.childcall}
</SignupSection>
change it to
<SignupSection childcall={this.childcall} />
I am new to react and react native.
I am trying to set up a simple app, using this tutorial
https://github.com/aksonov/react-native-router-flux/blob/master/docs/MINI_TUTORIAL.md
I have set up my app with this command
create-react-native-app my-project
I start the app and see it in expo on my phone.
Then
npm i react-native-router-flux --save
I replace the contents of App.js with all the code from that tutorial. I also create the required PageOne.js and PageTwo.js.
I then get an immediate error on my phone.
[react-native-router-flux] props should be defined
assert
c:\my path...\react-native-router-flux\src\Util.js#34:10
How do I define these props? What do I need to do to get this working?
Extras!
The code is exactly as in that tutorial,
App.js
import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux';
import PageOne from './PageOne';
import PageTwo from './PageTwo';
export default class App extends Component {
render() {
return (
<Router>
<Scene key="root">
<Scene key="pageOne" component={PageOne} title="PageOne" initial={true} />
<Scene key="pageTwo" component={PageTwo} title="PageTwo" />
</Scene>
</Router>
)
}
}
PageOne.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { Actions } from 'react-native-router-flux';
export default class PageOne extends Component {
render() {
return (
<View style={{margin: 128}}>
<Text onPress={Actions.pageTwo}>This is PageOne! </Text>
</View>
)
}
}
PageTwo.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { Actions } from 'react-native-router-flux';
export default class PageTwo extends Component {
render() {
return (
<View style={{margin: 128}}>
<Text onPress={Actions.pageOne}>This is PageTwo!</Text>
</View>
)
}
}
I don't really have a conclusive answer. Perhaps just being new to a lot of different moving parts had caused something to get out of line.
I updated some magic numbers in package.json and app.json according to the upgrade table on this page
https://github.com/react-community/create-react-native-app/blob/master/VERSIONS.md
and things started to work again.
I suppose that some of my thrashing around installing various react things had gotten the installed versions out of step. Perhaps if I really understood the ecosystem it would seem clear to me but it feels like a bunch of string and bailing wire at the moment!
I am using 0.16.4 material-ui and trying to get Drawer component working but I am unable to get swipe working for it. I am unable to figure out the problem myself and being a newbie I am not sure what all I can try.
import React from 'react';
import './App.css';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Drawer from 'material-ui/Drawer';
import Chip from 'material-ui/Chip';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
class App extends React.Component {
constructor() {
super();
this.state = {
open: true
}
}
render() {
return (
<MuiThemeProvider>
<Drawer
open={this.state.open}
docked={false}
onRequestChange={(o, r) => {
console.log(o + " reason:" + r);
this.setState({open: o});
}}
>
<Chip>"one"</Chip>
<Chip>"two"</Chip>
<Chip>"three"</Chip>
</Drawer>
</MuiThemeProvider>
);
}
}
export default App;
react: 15.4.0,
material-ui: 0.16.4,
react-tap-event-plugin: 2.0.1
Found the issue. In my case body is of length zero and that's why the swipe motion event is not recognized. For a workaround I have made body to occupy complete viewport and now the drawer works fine.
Add the
react-tap-event-plugin package
and :
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
See: the official docs
When I click on the element AppBar, icon on the left, _handleClick() method should execute.
I can't get console message.
I'm using material-ui framework and the attribute onLeftIconButtonTouchTap is provided for a callback function for when the left icon is selected via a touch tap.
import React, { Component } from 'react'
import { AppBar, IconButton } from 'material-ui'
import MoreVertIcon from 'material-ui/lib/svg-icons/navigation/more-vert';
let injectTapEventPlugin = require("react-tap-event-plugin");
//Needed for onTouchTap
//Can go away when react 1.0 release
//Check this repo:
//https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();
class Header extends Component {
constructor(props) {
super(props);
this._handleClick = this._handleClick.bind(this);
}
_handleClick(e) {
e.preventDefault();
// Show/Hide the LeftMenu
window.console.log("Click!");
}
render() {
return (
<AppBar title="Arasaaccc"
iconElementLeft={ <IconButton>
<MoreVertIcon/>
</IconButton> }
onLeftIconButtonTouchTap={ this._handleClick }
isInitiallyOpen={ true } />
)
}
}
export default Header
However it works with another component:
class Prueba extends Component {
constructor(props) {
super(props);
this._handleClick = this._handleClick.bind(this);
}
_handleClick(e) {
e.preventDefault();
window.console.log("Click!");
}
render (){
return (
<h1 onClick={this._handleClick}>Prueba Prueba Prueba</h1>
)
}
}
export default Prueba;
If you specify an icon for the AppBar component, onLeftIconButtonTouchTap event does not work.
Either you don't specify an icon:
<AppBar title="Arasaaccc"
onLeftIconButtonTouchTap={ this._handleClick }
isInitiallyOpen={ true } />
Or you apply the event on the IconButton component:
<AppBar title="Arasaaccc"
iconElementLeft={ <IconButton onTouchTap={ this._handleClick } >
<MoreVertIcon />
</IconButton> }
isInitiallyOpen={ true } />
Edit: Note that, according to this GitHub issue, the problem should be solved. You still can't have a a _handleClick on both of iconElementLeft and onLeftIconButtonTouchTap, either one or the other.
I can't see any problems with your code, so my guess is you'll need the React-Tap-Event-Plugin. The docs say this dependency is temporary and will go away once react v1.0 is released.