I have the following component in which I am trying to set the onSubmitEditing function of a TextInput element to a custom function called func. I would like it to take the content of the TextInput box as input to the function. How can this be done? Below is my failed attempt at doing so:
export default class Component4 extends Component {
func(input){
// will add stuff here later
}
render(){
return (
<View style={{padding: 30}}>
<TextInput placeholder="default" onSubmitEditing=this.func/>
</View>
);
}
}
PS:
Thanks to everyone so far for the help, I've managed to get it working partly, here is my code now:
export default class Component4 extends Component {
constructor(props) {
super(props);
this.state = {thing: 'asdf'};
}
func(input){
this.state.thing = input;
// I will eventually do more complicated stuff here
}
render(){
return (
<View style={{padding: 30}}>
<TextInput placeholder="default" onSubmitEditing={this.func}/>
<Text>{this.state.thing}</Text>
</View>
);
}
}
this gives an error, I am trying to make it so that state.thing gets set to
the input. thanks
Option 1:
<View style={{padding: 30}}>
<TextInput placeholder="default" onSubmitEditing={this.func}/>
</View>
Option 2:
<View style={{padding: 30}}>
<TextInput placeholder="default" onSubmitEditing {(e)=>this.func(e.target.value)}/>
</View>
state={
text:''
}
Func(e){
text:e.target.value
}
onSubmitChange={this.func}
Don't forget to bind the func function
Related
In React Native way, if I have this structure:
function Component(props){
return (
<View style={props.style1}>
<View style={{overflow: hidden}}>
<View style={props.style2}></View>
</View>
</View>
);
}
How can I override the {overflow: hidden} on the 2nd View?
Let say that I don't have the capability to change the Component because I use a library that I don't have access to.
You can override styles only if you have something like this
export interface Props {
extraStyle: ViewStyle
}
function Component(props: Props){
return (
<View style={props.style1}>
<View style={[ {overflow: visible}, props.extraStyle ]}>
<View style={props.style2}></View>
</View>
</View>
);
}
and you have access to extraStyle prop outside, therefore if you define extraStyle = {{overflow: 'auto'}}, then it will be overridden. Otherwise, you cannot change its style from outside
I have a simple app with 2 images. When I click on image1, I want to display hello on the console.
But my function doesn't write anything in the console.
I didn't use a function and called directly console.log in the 2nd image and it works.
Do you know what is wrong with my function?
(I also used makeALogHello.bind(this) but it doesn't change the behavior).
export default class App extends React.Component {
constructor(){
super();
}
makeALogHello(){
console.log("hello");
}
render() {
return (
<View>
<TouchableOpacity style ={{flex:1}}
onPress={() => {this.makeALogHello} }>
<Image style ={styles.container}
resizeMode="contain"
source={require("./images/image1.png")}/>
<Text>ImageNb1</Text>
</TouchableOpacity>
<TouchableOpacity style ={{flex:1}}
onPress={() => {console.log("hi")} }>
<Image style ={styles.container}
resizeMode="contain"
source={require("./images/image2.png")}/>
<Text>ImageNb2</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
You need to call the function in your arrow function:
onPress={() => {this.makeALogHello()} }
Or simply pass the reference to your function, without wrapping it:
onPress={this.makeALogHello}
I am developing a simple React Native application for learning purpose. I am just taking my initial step to get into the React Native world. But in this very early stage, I am having problems. I cannot get a simple touch event working. I am implementing touch event using TouchableWithoutFeedback. This is my code.
class AlbumList extends React.Component {
constructor(props)
{
super(props)
this.state = {
displayList : true
}
}
componentWillMount() {
this.props.fetchAlbums();
}
albumPressed(album)
{
console.log("Touch event triggered")
}
renderAlbumItem = ({item: album}) => {
return (
<TouchableWithoutFeedback onPress={this.albumPressed.bind(this)}>
<Card>
<CardSection>
<Text>{album.artist}</Text>
</CardSection>
<CardSection>
<Text>{album.title}</Text>
</CardSection>
</Card>
</TouchableWithoutFeedback>
)
}
render() {
let list;
if (this.state.displayList) {
list = <FlatList
data={this.props.albums}
renderItem={this.renderAlbumItem}
keyExtractor={(album) => album.title}
/>
}
return (
list
)
}
}
const mapStateToProps = state => {
return state.albumList;
}
const mapDispatchToProps = (dispatch, ownProps) => {
return bindActionCreators({
fetchAlbums : AlbumListActions.fetchAlbums
}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(AlbumList);
As you can see, I am implementing touch event on the list item. But it is not triggering at all when I click on the card on Simulator. Why? How can I fix it?
You should wrap your content in component like this:
<TouchableWithoutFeedback>
<View>
<Your components...>
</View>
</TouchableWithoutFeedback>
TouchableWithoutFeedback always needs to have child View component. So a component that composes a View isn't enough.
So instead of
<TouchableWithoutFeedback onPressIn={...} onPressOut={...} onPress={...}>
<MyCustomComponent />
</TouchableWithoutFeedback>
use:
<TouchableWithoutFeedback onPressIn={...} onPressOut={...} onPress={...}>
<View>
<MyCustomComponent />
</View>
</TouchableWithoutFeedback>
See the github issue for more info
Can be used with <TouchableOpacity activeOpacity={1.0}> </TouchableOpacity>
For those who struggle with this issue in react-native 0.64, and wrapping it in just a View doesn't work, try this:
<TouchableWithoutFeedback onPress={onPress}>
<View pointerEvents="none">
<Text>Text</Text>
</View>
</TouchableWithoutFeedback>
In my case i accidentally imported TouchableWithoutFeedback from react-native-web instead of react-native. After importing from react-native everything worked as expected.
In more recent React Native versions, just use Pressable instead:
https://reactnative.dev/docs/pressable
In my case, there was a shadow underneath, which caused instability. What I did to solve it was quite simple: zIndex: 65000
<View style={{ zIndex: 65000 }}>
<TouchableWithoutFeedback onPressIn={() => {}>
<View>
</View>
</TouchableWithoutFeedback>
</View>
I'm having this issue with ui kitten kit library, it works fine with regular but throw this error when I'm passing props. I tried to change my import / exports method with no luck. can please someone help figure it out.
import { RkTheme, RkButton, RkCard, RkText, rkCardContent, rkCardImg, rkCardFooter, } from 'react-native-ui-kitten';
...
export default class AutocompleteExample extends Component {
render() {
return (
<Content />
<RkCard>
<View rkCardHeader>
<Text>Header</Text>
</View>
<Image rkCardImg source={{uri: this.state.img}}/>
<View rkCardContent>
<Text>quick brown fox</Text>
</View>
<View rkCardFooter>
<Text>{this.state.price}</Text>
</View>
</RkCard>
)
}
module.exports = AutocompleteExample
this.state.img works well and I'm able to see the picture however this.state.price do not work, if replace it with a regular text it works. Thanks.
Rewriting the above code
import { RkTheme, RkButton, RkCard, RkText, rkCardContent, rkCardImg, rkCardFooter, } from 'react-native-ui-kitten';
...
export default class AutocompleteExample extends Component {
state = {
price: '',
}
render() {
return (
<Content />
<RkCard>
<View rkCardHeader>
<Text>Header</Text>
</View>
<Image rkCardImg source={{uri: this.state.img}}/>
<View rkCardContent>
<Text>quick brown fox</Text>
</View>
<View rkCardFooter>
<Text>{this.state.price}</Text>
</View>
</RkCard>
)
}
module.exports = AutocompleteExample
Sorry if this is a simple question but I can't seem to get it to work.
Currently I have a button that should return Main (the main page of my app) by calling the onPress function.
class Button extends Component{
onTap(){
return <Main/>;
}
render(){
return(
<View>
<TouchableOpacity
onPress={this.onTap}
style={styles.buttonContainer}>
<Text style={styles.buttonText}>LOGIN</Text>
</TouchableOpacity>
</View>
)
}
}
But i'm getting this error:
undefined is not a function (evaluating '_this2.props.onTap()')
Can someone help me out here? I don't know what's wrong
class Button extends Component{
constructor(props) {
super(props);
this.state={isLogin:false}
}
onTap(){
this.setState({isLogin:true});
}
render(){
if(this.state.isLogin){
return <Main/>;
}
return(
<View>
<TouchableOpacity
onPress={this.onTap}
style={styles.buttonContainer}>
<Text style={styles.buttonText}>LOGIN</Text>
</TouchableOpacity>
</View>
)
}};
please go through docs about JSX first~