I have started to learn React Native recently, to try and build an application. I am trying to change the colour of the social media icons when the user clicks on them. I have manged to direct to a link when pressed but failed to change the colour.
Index.js
const SocialMedia = () => {
return (
<View style={styles.container}>
<Pressable
onPress={() =>{ Linking.openURL('https://www.facebook.com/frogsystems')
;
}}>
<Icon style={styles.social} name="facebook-f" size={30} color="#900" />
</Pressable>
<Pressable
onPress={() =>{ Linking.openURL('https://www.linkedin.com/company/frog-systems-ltd/')
;
}}>
<Icon style={styles.social} name="linkedin" size={30} color="#900" />
</Pressable>
<Pressable
onPress={() =>{ Linking.openURL('https://twitter.com/frogsystemsltd')
;
}}>
<Icon style={styles.social} name="twitter" size={30} color="#900" />
</Pressable>
</View>
)
}
export default SocialMedia;
styles.js
import { StyleSheet } from "react-native";
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
padding: 50,
justifyContent: 'center',
alignItems: "center",
},
social:{
color:'white',
padding:20,
alignItems: 'center',
},
});
export default styles;
Add pressed to change vector icon color when pressed
<Pressable
onPress={() =>{ Linking.openURL('https://www.facebook.com/frogsystems')
;
}}>
{({ pressed }) => (
<Icon
style={[
{
color: pressed ? '#D6D6D6' : '#343434'
},
styles.social,
]}
name="facebook-f"
size={30}
/>
)}
</Pressable>
Remove color from styling
social:{
padding:20,
alignItems: 'center',
},
Related
as you can see in the image, I have implemented adding Text inputs dynamically with the button press, everything is working perfectly only the 1st text input hidden item (Remove Button) not hiding when swiping the other text inputs.
const initialState = {
col1: '',
key: 0,
};
const [inputField, setInputField] = useState<Values[]>([initialState]);
<SwipeListView
data={inputField}
renderItem={data => renderItem(data)}
renderHiddenItem={data => renderHiddenItem(data)}
leftOpenValue={55}
rightOpenValue={-100}
disableRightSwipe={true}
ListHeaderComponent={
<View style={[styles.headingContainer]}>
<Text style={[styles.headingText]}>{Props.inputHeading}</Text>
</View>
}
ListFooterComponent={
<View style={styles.buttonContainer}>
<TouchableOpacity
style={styles.addBtn}
activeOpacity={0.7}
onPress={onPressAddBtn}>
<Text style={styles.BtnText}>Add</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.submitBtn} activeOpacity={0.7}>
<Text style={styles.BtnText}>Submit</Text>
</TouchableOpacity>
</View>
}
style={{height: Dimensions.get('screen').height / 1.3}}
/>
const renderItem = (data: any) => {
return (
<TouchableHighlight key={data.item.key}>
<TextInput
placeholder="Hello"
onChangeText={e => handleChange(data.item.key, 'col1', e)}
value={data.item.col1}
style={[styles.textInput, Props.textInputStyle]}
// {...Props.textInputProps}
/>
</TouchableHighlight>
);
};
const renderHiddenItem = (rowData: any) => {
return (
<View
style={{
justifyContent: 'flex-end',
flexDirection: 'row',
alignItems: 'center',
}}>
<TouchableOpacity
activeOpacity={0.7}
style={{
backgroundColor: 'red',
justifyContent: 'center',
flexDirection: 'row',
width: 90,
height: 45,
alignItems: 'center',
borderRadius: 5,
}}>
<Text style={{color: 'white'}}>Remove</Text>
</TouchableOpacity>
</View>
);
};
but other all element's swipe is working as expected only the first element is not working as expected
found solution by adding keyExtractor={item => item.key.toString()} to swiper flatlist.
I've made a flatlist with a few data inside. I want to make a pop-up information for each item in the flatlist. So I tried putting Modal into the renderItem function but when it sets the modal state visible, it will show all of the information in my flatlist. I think it should be setting the modal visible state by id or something like that but I don't know how to do it. Any suggestion?
my renderItem:
function RenderItem({ item }) {
return (
<View>
<Modal
animationType='slide'
transparent={true}
visible={infoModal}>
<View style={styles.informationContainer}>
<View style={styles.informationBox}>
<Text>{item.file.displayName}</Text>
<Button title=' OK ' onPress={() => setInfoModal(false)} />
</View>
</View>
</Modal>
<TouchableOpacity style={styles.listBox} onPress={() => setInfoModal(true)}>
<View>
<Text numberOfLines={1} style={styles.listText}>{item.file.displayName}</Text>
<Text style={{ width: 200, color: 'rgba(0, 0, 0, 0.5)' }}>{item.certificateName}</Text>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'center' }}>
<TouchableOpacity>
<Icon name='search' color='black' size={25} />
</TouchableOpacity>
<Text> </Text>
<TouchableOpacity onPress={() => handleDownload(item)}>
<Icon name='download' color='black' size={25} />
</TouchableOpacity>
<Text> </Text>
</View>
</TouchableOpacity>
</View>
)
}
Instead of setting a simple boolean value about whether the Modal should appear, you can set some sort of identifiable value that tells it what item to load (and otherwise leave it undefined).
Bare-bones example:
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
export default function App() {
const [modalInfo, setModalInfo] = React.useState(undefined);
const renderItem = ({ item }) => (
<TouchableOpacity onPress={() => setModalInfo(item.title)}><Text>{item.title}</Text></TouchableOpacity>
);
return (
<View style={styles.container}>
<Modal visible={modalInfo !== undefined}>
<View style={[{borderWidth: 1},styles.centeredView]}>
<Text>{modalInfo}</Text>
<TouchableOpacity onPress={() => setModalInfo(undefined)}><Text>Close</Text></TouchableOpacity>
</View>
</Modal>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</View>
);
}
const styles = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: "center",
alignItems: "center",
marginTop: 22
},
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});
I am implementing a page in my app that takes a user input and then searches a tv shows API for shows relating to what the user inputs. The form works, and data is returned succesfully, however once the search button has been clicked and the data has been returned, the search bar AND search button becomes unresponsive and will not bring up the keyboard. This was tested on a pixel 3 AVD, however on an iphone X using expo Go, the search button fully disapears from the page!
Here is the code:
import React, {useState} from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity, FlatList, ActivityIndicator, Image } from 'react-native';
import {AntDesign} from '#expo/vector-icons';
const ShowDisplay = ({navigation}) => {
const[text, changeText] = useState('');
const[data, setData] = useState([]);
const check = (item) => {
if(item.show.image){
return(
<Image source={{uri:item.show.image.medium}} style={{width:'100%', height: 200}} />
)
}else{
return(
<Text>Poo</Text>
)
}
}
const showfind = () =>{
fetch('https://api.tvmaze.com/search/shows?q=' + text)
.then((response)=> response.json())
.then((json)=> setData(json))
.catch((error)=>alert(error));
}
const showSearch = (text) =>{
showfind();
}
const changeHandler = (text) =>{
changeText(text)
}
console.log('text is currently '+ text)
return(
<>
<View style={styles.container}>
<View style = {styles.searchform}>
<TextInput
placeholder = 'Search for a show'
style = {styles.search}
onChangeText={text => changeHandler(text)}
/>
<TouchableOpacity onPress={() => showSearch(text)}>
<AntDesign name="search1" size={30} color='black' style = {{marginTop: 19, marginLeft: 15,}}/>
</TouchableOpacity>
</View>
</View>
<View>
{data? (<View style={styles.resultsContainer}>
<FlatList
style = {styles.list}
keyExtractor={(item, index)=> index.toString()}
numColumns= '3'
data={data}
renderItem={({item}) => (
<>
<TouchableOpacity style = {styles.show} onPress={() => navigation.navigate('toShow', {
id: item.show.id,
} )}>
<View style={styles.text}>
{check(item)}
</View>
</TouchableOpacity>
</>
)}
/>
</View>) : (<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#000"/>
</View>)}
</View>
</>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
},
search :{
paddingLeft: 15,
marginTop: 20,
borderRadius:30,
width: 200,
height: 30,
borderWidth: 1,
borderColor: '#000'
}, header : {
marginTop: 20,
fontSize: 30,
},
searchform:{
flexDirection: 'row',
},
show:{
width: '33.3%',
height: 200,
borderStyle: "solid",
borderColor: 'white',
borderWidth: 1,
},
list:{
marginTop: 70,
}
});
export default ShowDisplay;
I thought that maybe because the sumbit button runs a function, maybe the function never stops, and needs to be reset? When the sumbit button is pressed, it makes the call to the API.. I am unsure what is happening.
Looks like you're getting a weird side effect by using a Fragment (<></>) as the root view. The style is getting thrown off in certain circumstances.
Since you don't actually have a reason to use a Fragment as the root (your container view is the root element), removing it seemed to solve the issue. I also removed the unnecessary fragment you were using in the search button.
return(
<View style={styles.container}>
<View style = {styles.searchform}>
<TextInput
placeholder = 'Search for a show'
style = {styles.search}
onChangeText={text => changeHandler(text)}
/>
<TouchableOpacity onPress={() => showSearch(text)}>
<AntDesign name="search1" size={30} color='black' style = {{marginTop: 19, marginLeft: 15,}}/>
</TouchableOpacity>
</View>
<View>
{data? (<View style={styles.resultsContainer}>
<FlatList
style = {styles.list}
keyExtractor={(item, index)=> index.toString()}
numColumns= '3'
data={data}
renderItem={({item}) => (
<TouchableOpacity style = {styles.show} onPress={() =>
navigation.navigate('toShow', {
id: item.show.id,
} )}>
<View style={styles.text}>
{check(item)}
</View>
</TouchableOpacity>
)}
/>
</View>) : (<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#000"/>
</View>)}
</View>
</View>
);
I have a view with some TextInputs, and some of them are in the bottom part of the screen. The thing is I want the screen to move up when I click on them to that way I can see what I'm writing. I searched a lot but nothing works for me, I have my view nested in a KeyboardAvoidingView but nothing happens when I click on the TextInput. Here's my code:
<KeyboardAvoidingView
keyboardVerticalOffset={64}
style={{ flex: 1 }}
>
<View style={styles.screen}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<TextInput
value={title}
onChangeText={text => setTitle(text)}
style={styles.singleLineTextInput}
placeholder="Title"
/>
<TextInput
value={keywords}
onChangeText={text => setKeywords(text)}
style={styles.singleLineTextInput}
placeholder="Keywords"
/>
<TextInput
value={description}
onChangeText={text => setDescription(text)}
style={{ ...styles.singleLineTextInput, ...styles.descriptionTextInput }}
placeholder="Description"
multiline={true}
autoFocus={true}
/>
</TouchableWithoutFeedback>
</View>
</KeyboardAvoidingView >
And my styles:
const styles = StyleSheet.create({
screen: {
flex: 1,
padding: 16,
alignItems: 'center'
},
singleLineTextInput: {
width: DEVICE_WIDTH * 0.8,
borderColor: 'black',
borderBottomWidth: 2,
fontSize: 16,
paddingHorizontal: 16
},
descriptionTextInput: {
maxHeight: DEVICE_HEIGHT / 4
}
});
I'm using React-Navigation and I tried changing keyboardVertialOffset and behavior to multiples values but nothing happens. Any ideas?
Thanks in advance
Import Content from native-base as
import { Content } from 'native-base';
And import platform from react-native
import { Platform } from 'react-native';
And use content and platform in your code like this:
<KeyboardAvoidingView
behavior={Platform.Os == "ios" ? "padding" : "height"}
style={{ flex: 1 }}
><Content>
<View style={styles.screen}>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<TextInput
value={title}
onChangeText={text => setTitle(text)}
style={styles.singleLineTextInput}
placeholder="Title"
/>
<TextInput
value={keywords}
onChangeText={text => setKeywords(text)}
style={styles.singleLineTextInput}
placeholder="Keywords"
/>
<TextInput
value={description}
onChangeText={text => setDescription(text)}
style={{ ...styles.singleLineTextInput, ...styles.descriptionTextInput }}
placeholder="Description"
multiline={true}
autoFocus={true}
/>
</TouchableWithoutFeedback>
</View>
</Content>
</KeyboardAvoidingView>
Hope this helps!
Hello I am new to react native and i am having problems with the view. I am having trouble with the text input as it only shows very small. When i
remove the container in the StyleSheet All Text disappears and the text inputs become big.
Here is my code
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
<View>
<View style ={styles.textinput}>
<TextInput
keyboardType='ascii-capable'
placeholder='First Name'
value={this.state.firstName}
onChangeText={(text) => {this.setState({firstName: text})}}/>
<TextInput
keyboardType='ascii-capable'
placeholder='Middle Name'
value={this.state.middleName}
onChangeText={(text) => {this.setState({middleName: text})}}/>
<TextInput
keyboardType='ascii-capable'
placeholder='Last Name'
value={this.state.lastName}
onChangeText={(text) => {this.setState({lastName: text})}}/>
<TextInput
keyboardType='ascii-capable'
placeholder='Email'
value={this.state.email}
onChangeText={(text) => {this.setState({email: text})}}/>
<TextInput
keyboardType='ascii-capable'
placeholder='Address'
value={this.state.address}
onChangeText={(text) => {this.setState({address: text})}}/>
</View>
<View style={styles.buttonModal}>
<Button
style={styles.cancelButton}
onPress={this.editUser}
title="SAVE"
color="#343434"
accessibilityLabel="Save user."/>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
textinput: {
flex: 0,
},
buttonModal: {
paddingTop: 20,
flexDirection: 'row',
justifyContent: 'space-around'
},
});
Remove <view> above <View style ={styles.textinput}> and make
textinput: {
flex: 1,
}
for button, try by commenting flexDirection: 'row',justifyContent: 'space-around' one by one.