I have the following code:
import React, {Component} from 'react';
import {Platform, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View,} from 'react-native';
import {Alert} from "react-native-web";
export default class HomeScreen extends Component {
state = {text: ''};
_onPressSearch() {
Alert.alert("Button pressed!")
}
render() {
return (<View style={styles.container}>
<ScrollView style={styles.scrollViewContainer} contentContainerStyle={styles.contentContainer}>
<View style={styles.searchContainer}>
<TextInput placeHolder="Type something!" onChangeText={(text) => this.setState({text})}
value={this.state.text}/>
</View>
<TouchableOpacity
onPress={this._onPressSearch}>
<View>
<Text>Search</Text>
</View>
</TouchableOpacity>
<View style={styles.listContainer}>
<Text>{this.state.text}</Text>
</View>
</ScrollView>
</View>
And my problem is that when I click on TouchableOpacity no action happens (in my case showing alert). I tried to change ToachableOpacity and View combination to usual button but nothing happened again. So, what's the problem and how can I solve it?
Looking at the docs looks like Alert is not completed yet (https://github.com/necolas/react-native-web) inside react-native-web.
This is the issue about the react-native-web alert: https://github.com/necolas/react-native-web/issues/1026
Try using default javascript alert doing alert("Button pressed!") or importing Alert from react-native
The code looks fine
Related
First of all this is my first question ever so i apologies if it wastes anyones time.
Currently i've been trying to see if i can use tailwind with reactNative for one of my school projects.
I've run into a problem postsetup (i assume postsetup).
The following code when exported to the web using expo start web displays indigo text and a black background in at the top of the browser.
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<>
<View className="bg-black">
<Text className="text-indigo-500">Open up App.js to start working on
your app!</Text>
<StatusBar style="auto" />
</View>
</>
);
}
Now when i do the following:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<>
<View className="bg-black items-center">
<Text className="text-indigo-500">Open up App.js to start
working on your app!</Text>
<StatusBar style="auto" />
</View>
</>
);
}
I've now added items-center to the view, and suddenly it doesn't display the background-color or align the text at the center. Why is this?
React components by default do not support tailwind. However, NativeWind makes it possible to use tailwind in react native
I am having a very peculiar issue with React Native Elements Text Input along with using touchable opacity.
import React, { useState } from 'react';
import { TouchableOpacity, View, Dimensions } from 'react-native';
import { Input } from 'react-native-elements';
const test = () => (
<TouchableOpacity onPress={() => console.log('we hit here')}>
<Input disabled>
{children}
</Input>
</TouchableOpacity>
)
export default test;
So the outer rim of the input field is completely clickable, however, the center of the component, it cannot be clicked.
This works perfectly for android however.
Any ideas
if anyone has this issue, then the you need to supply a pointerEvents to 'none' for the entire component to be clickable:
<View pointerEvents='none'>
<Input disabled>
{children}
</Input>
</View>
Mubeen hussain answer is correct, but to be more precise it's like this
<TouchableOpacity onPress={() => console.log('we hit here')}>
<View pointerEvents="none">
<Input disabled>{children}</Input>
</View>
</TouchableOpacity>
I'm building a react-native app. Basically, it has a BottomTabNavigation for navigating through the screens.
In one of my screens, I want to open another screen with a BottomTabNavigation to navigate to other screens inside.
Unfortunately, I haven't found something on Google or in the search function. Is this possible to create?
You can do it easily using a module called react-native-best-viewpager!
Install with:
npm install --save react-native-best-viewpager or with yarn install react-native-best-viewpager if you're using yarn.
Here's an example of how to use it:
import {StyleSheet, View, Text} from 'react-native';
import React, {Component} from 'react';
import {PagerTabIndicator, IndicatorViewPager} from 'react-native-best-viewpager';
export default class ViewPagerPage extends Component {
render() {
return (
<View style={{flex:1}}>
<IndicatorViewPager
style={{flex:1, paddingTop:20, backgroundColor:'white'}}
indicator={this._renderTabIndicator()}
>
<View style={{backgroundColor:'cadetblue'}}>
<Text>page one</Text>
</View>
<View style={{backgroundColor:'cornflowerblue'}}>
<Text>page two</Text>
</View>
<View style={{backgroundColor:'#1AA094'}}>
<Text>page three</Text>
</View>
</IndicatorViewPager>
</View>
);
}
_renderTabIndicator() {
let tabs = [{
text: 'Home',
iconSource: require('../imgs/ic_tab_home_normal.png'),
selectedIconSource: require('../imgs/ic_tab_home_click.png')
},{
text: 'Message',
iconSource: require('../imgs/ic_tab_task_normal.png'),
selectedIconSource: require('../imgs/ic_tab_task_click.png')
},{
text: 'Profile',
iconSource: require('../imgs/ic_tab_my_normal.png'),
selectedIconSource: require('../imgs/ic_tab_my_click.png')
}];
return <PagerTabIndicator tabs={tabs} />;
}
}
I have a simple app with a Welcome class that redirects to Select class.
Select class has 2 buttons.
My problem is that when I redirect to Select class, button are automatically clicked and I have the Alert triggered without clicking.
Do you know how to prevent it ?
//Select.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image,ImageBackground, Linking, TouchableOpacity, Alert, Button } from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation"
export default class Select extends React.Component {
displayMessage1(){
Alert.alert("hello1")
}
displayMessage2(){
Alert.alert("hello2")
}
render() {
return (
<View>
<ImageBackground
source={require("./images/im1.jpg")}
style={styles.imageBackground}>
<View style ={{flex:0.3}}></View>
<View style ={{flex:1}}>
<Text style ={styles.text}> myText</Text>
</View>
<Button
onPress={this.displayMessage1()}
title="go message 1"
color="#00aaf0"
/>
<View style ={{flex:0.3}}></View>
<Button
onPress={this.displayMessage2()}
title="go message 2"
color="#00aaf0"
/>
<View style ={{flex:1}}></View>
</ImageBackground>
</View>
)
}
}
```
You are executing displayMessage1 message on the onClick method of your button.
You should do something like, so when the event is fired, the method binded to your class will be called.
<Button
onPress={this.displayMessage1.bind(this)}
title="go message 1"
color="#00aaf0"
/>
<Button
onPress={this.displayMessage1()} // <-- here
title="go message 1"
color="#00aaf0"
/>
That's be cause instead of passing a reference to the the onPress prop you are actually execution the method, so on every render that method if being called.
Like a title, I want to disable a submit button (Search) on device's keyboard if text input is an empty string.
I creating a search bar and using TextInput.
How can I do this?
you should have 2 state (textSearch and buttonStatus) and check every onChangeText in TextInput props
here's a simple code I've used:
import React, {Component} from 'react';
import RN, {View, StyleSheet, Text} from 'react-native';
export default class History extends Component {
constructor(props) {
super(props);
this.state={
search:null,
disabledButton:true
}
}
render(){
return(
<View style={styles.container}>
<RN.TextInput
value={this.state.search}
onChangeText={(e)=>{
this.setState({search:e, disabledButton:e==""?true:false})
}}
/>
<RN.Button
title="Search"
disabled={this.state.disabledButton}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container:{flex:1, justifyContent:'center', alignItems:'center'}
})
this is the first time I've provided help here, so hopefully it helps someone.
The inputText should be whatever state you use to store your text.
addItem() is whatever function name you want to execute when there are enough characters.
I wanted to require the user to type more than 1 character, so adjust to your liking.
onSubmitEditing={() => {(inputText.length < 2) ? console.log('test') : addItem()}}
<TextInput
style={styles.input}
onSubmitEditing={() => {
(inputText.length < 2) ? console.log('test') : addItem()
}}
maxLength={20}
autoCorrect={false}
onChangeText={onChangeText}
placeholder={'Scavenger Hunt Item'}
value={inputText}>
</TextInput>