Working with react-native is mega frustrating. Its more frustrating because I am new to it. I have written component that takes redux action as an input.
import React from "react";
import {Text} from "react-native";
import styles from "./searchBoxStyles";
import {View,InputGroup,Input} from "native-base";
import Icon from "react-native-vector-icons/FontAwesome";
export const SearchBox = (getInputData,selectedSearchTab) => {
function handleInput(key,val){
getInputData({
key,
value:val});
}
return(
<View style={styles.searchBox}>
<View style={styles.inputWrapper}>
<Text style={styles.label}>PickUp</Text>
<InputGroup>
<Icon name="search" size={15} color="#FF5E3A"/>
<Input onFocus={()=>selectedSearchTab("pickUp")} style={styles.inputSearch} placeholder="choose pickup location" onChanangeText={handleInput.bind(this,"pickUp")}/>
</InputGroup>
</View>
<View style={styles.secondInputWrapper}>
<Text style={styles.label}>DropOff</Text>
<InputGroup>
<Icon name="search" size={15} color="#FF5E3A"/>
<Input onFocus={()=>selectedSearchTab("dropOff")} style={styles.inputSearch} placeholder="choose drop off location" onChanangeText={handleInput.bind(this,"dropOff")}/>
</InputGroup>
</View>
</View>
);
};
export default SearchBox;
getInputData & selectedSearchTab are both redux actions, passed down from container component.
Clicking on the textBox I get selectedSearchTab is not a function error.
Related
import {SafeAreaView, StyleSheet,ScrollView, Text,Button, View, TouchableOpacity,TextInput} from 'react-native';
import React, {Component, useState} from 'react';
import Header from './AllHeaders/Header';
import UnitClerkHeader from './AllHeaders/UnitClerkHeader';
import AppointmentHeading from './AllHeaders/AppointmentHeading';
import PatientDoc from './PatientDoc';
import styles from './Styles/CompleteStyling';
export default class HomeScreen extends Component {
render(){
return (
<ScrollView>
<SafeAreaView style={{flex: 1}}>
<View>
<Header name="HOME SCREEN" class= ""/>
<UnitClerkHeader/>
<View style={styles.containerForButton}>
<TouchableOpacity style={styles.button_Side_by_Side}
onPress={() =>this.props.navigation.navigate("SignInScreen")}
>
<Text style={styles.Button_text_styling}>
REGISTRATION </Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button_Side_by_Side}
onPress={() =>this.props.navigation.navigate("SignInScreen")}
>
<Text style={styles.Button_text_styling}>
SEARCH </Text>
</TouchableOpacity>
</View>
<AppointmentHeading name="UPCOMING APPOINTMENTS" class= "" />
<PatientDoc/>
<PatientDoc/>
<PatientDoc/>
<PatientDoc/>
<PatientDoc/>
<TouchableOpacity style={styles.buttonGeneral}
onPress={() =>this.props.navigation.navigate("SignInScreen")}
>
<Text style={styles.Button_text_styling} >
NEXT </Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</ScrollView>
);
}
}
ERROR Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of HomeScreen.
Check if you imported components properly if you
export default
then you don't use {} when you import and if you just exported your component then you need {}... I suggest you check this first
I have a text input in an overlay in my react native application. I used keyboardavoidingview to make sure the keyboard doesn't cover my submit button but the entire overlay is not moving with the keyboard only the inside content is moving. Heres an image of what is happening. Is there any way to move the overlay with the content too?
This is my code
<Overlay overlayStyle={{borderRadius:15,backgroundColor:'#f8f8f8',paddingTop:20,paddingLeft:20,height:300}} isVisible={showrevoverlay} onBackdropPress={()=>{resetoverlay()}}>
<KeyboardAvoidingView keyboardVerticalOffset={300} style={{flex:1,alignItems:'center',justifyContent:'center'}} behavior="padding">
<View style={{flexDirection:'column',justifyContent:'space-evenly',alignItems:'center'}}>
<Text style={{fontWeight:'bold',textAlign:'left',width:'100%'}}>Review:</Text>
<TextInput
placeholder="Write review"
style={{alignItems:'center',justifyContent:'center'}}
style={{ height: 200,width:300, borderColor: 'gray',backgroundColor:'#eef4f6',marginTop:10}}
onChangeText={text => setreview(text)}
value={review}
/>
<TO onPress={()=>{saveReview()}} style={{marginTop:10,width:100,height:50,backgroundColor:'#4B53F2',justifyContent:'center',alignItems:'center'}}><Text style={{fontFamily:'Montserrat-Bold',color:'white',fontSize:15}}>Submit</Text></TO>
</View>
</KeyboardAvoidingView>
</Overlay>
Here is the solution to solve this problem. you can add your code.
import React , {Component} from 'react';
import {View , Dimensions,ScrollView} from 'react-native';
const windowHeight = Dimensions.get('window').height;
export default class Overlay extends Component {
render(){
return(
<View style={{flex:1}}>
<ScrollView style={{flex:1}}>
<View style={{width:'100%', height:windowHeight }}>
/*Every thing inside this will shift up with out changing style */
</View>
</ScrollView>
</View>
)
}
}
I'm moving now from other technologies to React Native and I have a problem. I have one presentational component which is <TaskInput />.
const TaskInput = (props: ITaskInputProps) => {
return (
<View style={styles.container} >
<Text style={styles.title}>{props.title}</Text>
<TextInput
style={styles.input}
multiline
scrollEnabled={false}
/>
</View>
)
}
ParentComponent over TaskInput
import React from 'react';
import { View } from 'react-native';
import styles from './styles';
import TaskInputContainer from '../task-input';
interface ITaskConfigurationProps {
title: string,
isInputForm?: boolean,
isRequired?: boolean,
}
const TaskConfiguration = (props: ITaskConfigurationProps) => {
return (
<View style={(props.isRequired) ? [styles.container, {backgroundColor: '#f25e5e'}] : styles.container}>
{ props.isInputForm && <TaskInputContainer title={props.title} /> }
</View>
);
}
export default TaskConfiguration;
const TaskScreen = (props: ITaskScreenProps) => {
return (
<View style={styles.container}>
<SectionTitle title={'Task Settings'} />
<ScrollView contentContainerStyle={styles.configurations}>
<TaskConfiguration title={"What you need to do?"} isInputForm={true} isRequired={true} />
<TaskConfiguration title={"Description"} isInputForm={true} />
<TaskConfiguration title={"Deadline"} />
<TaskConfiguration title={"Priority"} />
</ScrollView>
<Button isDone={true} navigation={props.navigation} />
</View>
)
}
TaskInput component takes one prop which is title and it will be in two places on my screen. One component will be called "Enter main task", another one is "Description". But this component will accept different states like currentMainTextInput and currentDescriptionTextInput. This is my idea of re-usable component TextInput, but I can't do what I want because if I set type in one input - other input will re-render with first input (both of them are one presentational component).
I want to use this dumb component in any place of my app. I don't want to create a new identical component and duplicate code, How can I do that? (P.S. I was thinking about "redux or class/hooks", but what should I use...)
Cannot navigate to other screen
I've tried import withNavigation but still can't work, it was showing
Uncaught Error : Undefined is not an object (Evaluating 'n.props.navigation')
Article.js
import ArticleItem from 'ArticleItem'
.....
<FlatList
style={styles.containerFlatList}
data={this.state.dataSource}
renderItem={({item}) =>
<ArticleItem
navigation={this.props.navigation}
title={item.title}
image={item.article_path}
id={item.id}
date={moment(item.created_at).locale('id').format("ll")}/>
}
keyExtractor={({title},index) => title}
/>
}
ArticleItem.js
import {withNavigation} from 'react-navigation';
import DetailArticle from '../screens/DetailArticle';
import Router from '../Router';
export default ArticleItem = (data) => (
<View style={styles.containerArticle}>
<TouchableOpacity onPress={() =>
{this.props.navigation.navigate('DetailArticle')}}>
<Image style={styles.imageArticle} source=
{{uri:'http://localhost/img/'+data.image}}/>
<View style={{padding: 10}}>
<Text style={{marginBottom: 8, fontSize: 18}}>{data.title}</Text>
<Text style={{fontSize: 12, color:'grey'}}>{data.date}</Text>
</View>
</TouchableOpacity>
</View>
);
Did i missed something?
From the code it looks like ArticleItem is a function component so in that you cannot access props from this keyword.
For your example you are sending props as data
So access the navigation as data.navigation.navigate('some-route')
For a component like this.
<ComponentA a='1' b='2'/>
If this is a functional component like here
const ComponentA=props=>{
//access here as props.a or props.b
return someJSX
}
i have used react-native-drawer . i have kept the side menu file seperate and import it in main file . i want to write click function in side menu file . when i click the first item it gives me this error.
how can i solve this problem i think its mocking child component error .
here is my side menu file code
import React, { Component } from 'react';
import {
View,
StyleSheet,TouchableHighlight
} from 'react-native';
import { Content,Text,List, ListItem .
,Header,Icon,Left,Right,Body,Button,Title} from 'native-base';
import StatusComponent from './StatusComponent';
import Hr from 'react-native-hr';
export default class SideBar extends Component{
constructor(props){
super(props);
console.log(props)
asad=this.asad.bind(this);
}
asad(){
alert('gata rhe ');
}
render(){
return(
<View style={{backgroundColor:'#262626',flex:1,
position:'relative' ,top:62}} >
<List>
<ListItem >
<Right>
<TouchableHighlight onPress={()=>this.asad(this.props)}>
<Text style={{color:'white'}} > main page</Text>
</TouchableHighlight>
</Right>
</ListItem>
<ListItem >
<Right>
<TouchableHighlight >
<Text style={{color:'white'}} > secnd page</Text>
</TouchableHighlight>
</Right>
</ListItem>
</List>
</View>
)
};
}
NativeBase provides help to include Drawer in our apps
Check NativeBase Drawer
i got the solution i m using NativeBase for ui things so touchable is not work in native listItems so i used button of native BAse like this
<ListItem Button onPress={() => this.asad(this.props) } >
<Right>
<Text style={{color:'white'}} > page</Text>
</Right>
</ListItem>