I'm mapping TouchableOpacity with an Image nested inside of it. It works great on Android but on iOS the image is invisible. There is still a 75x75 touchable opacity that I can tap but the image is invisible in the modal that pops up and just in general.
How does this work?
I'm using Expo SDK FileSystem to get the path of each image.
For example: file://path/to/container/progress/myfilehash.jpg
I push this to my state and map it in the component. the require() function WILL NOT WORK for the way I am doing this. I think it is purely a problem with the rendering.
Map code:
{this.state.images.map((val, key) => (
<TouchableOpacity
key={key}
onPress={() => this.setState({active: val, modal: true})}
>
<Image
style={{width: 75, height: 75}}
source={{isStatic: true, uri: val}}
/>
</TouchableOpacity>
))}
Modal:
<Container style={Colors.Backdrop}>
<Header style={Colors.Navbar}>
<Left>
<TouchableHighlight
onPress={() => {
this.setState({modal: false})
}}>
<Icon
name="arrow-back"
style={{color: 'white'}}
/>
</TouchableHighlight>
</Left>
<Body></Body>
<Right>
<TouchableOpacity
onPress={() => {
this._deleteImage(this.state.active);
}}>
<Text
style={[
Colors.ErrorText, {
fontSize: 24,
marginRight: 10
}
]}>×</Text>
</TouchableOpacity>
</Right>
</Header>
<Content>
<View
style={{flex: 1}}
>
<FitImage
source={{uri: this.state.active}}
/>
</View>
</Content>
</Container>
Code for fetching image paths. (NOTE: I tried not truncating "file://" from ios with same exact result)
_getAllImagesInDirectory = async() => {
let dir = await FileSystem.readDirectoryAsync(FileSystem.documentDirectory + 'progress');
dir.forEach((val) => {
this.state.images.push(Platform.OS === 'ios' ? FileSystem.documentDirectory.substring(7, FileSystem.documentDirectory.length) : FileSystem.documentDirectory + 'progress/' + val);
});
await this.setState({images: this.state.images, loading: false});
}
I also faced this problem once, I solved it by pasting the image in the root folder and then used that path in the source of Image tag.
Related
i am trying to use Keyboard.dismiss() inside of a TouchableWithoutFeedback element and for some reason, no matter where i place this TouchableWithoutFeedback element, the keyboard doesn't dismiss when tapping on areas outside the TextInput,
but it does dismiss when tapping the keyboard itself!
why does this happen and how do i fix it?
p.s. it worked fine on a different project
Message for Stack Overflow staff: many of my threads are being locked for "not being clear" even though i am being very thorough in each and every one of them
DO NOT LOCK THIS THREAD
the code:
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss()}>
<View style={styles.mainView}>
<View style={styles.topSearchView}>
<Image source={require("../../assets/NewSearchIcon.png")} style={styles.searchIcon} />
<TextInput
placeholder="Search for food you like..."
onChangeText={searchedCoursesHandler}
value={searchedCourses}
onFocus={() => { setInputBorderOnFocus(true) }}
style={{
borderColor: inputBorderOnFocus === true ? "#428463" : "grey",
borderWidth: 2,
width: 260,
height: 50,
marginLeft: 10,
fontSize: 18,
padding: 5,
borderRadius: 8,
fontSize: 16
}}
/>
<TouchableOpacity
onPress={() => { setSearchedCourses("") }}
style={styles.deleteInputTouchable}
>
<Image source={require("../../assets/newXicon.png")} style={styles.xButtonIcon} />
</TouchableOpacity>
</View>
<View style={styles.flatListView}>
<FlatList
data={searchedCourses}
renderItem={({ item }) => (
<TouchableOpacity
onPress={() => {
navigation.navigate('item profile', {
item: item,
});
}}
>
<View style={styles.flatListItemView}>
<Image source={{ uri: item.img }} style={styles.flatListImg} />
<Text>{item.name}</Text>
<Text>{item.price}$</Text>
</View>
</TouchableOpacity>
)}
horizontal={true}
/>
</View>
{
searchedCourses.length < 1 &&
<Image source={require("../../assets/NewPastaImage.png")} style={styles.pastaIcon} />
}
</View>
</TouchableWithoutFeedback>
);
enter code here
Change This <TouchableWithoutFeedback onPress={Keyboard.dismiss()}>
into this
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
I have a react native application in which I on the tab bar I am displaying an image as my tab bar icon. The issue is that it displays completely fine on the android simulator but when I run the same app on a real device the tab bar icon (which is a static image) is showing.
Here is the code snippet that I am using
<Tab.Screen
name="NFT Market"
component={NftMarketplace}
options={{
headerShown: false,
tabBarHideOnKeyboard: true,
tabBarIcon: ({focused}) => (
<View
style={{
justifyContent: 'center',
alignItems: 'center',
}}>
<Image
source={customIcons.nftmaketplace}
resizeMode="contain"
style={{
width: 50,
height: 50,
}}
/>
</View>
),
tabBarButton: props => <CustomTabbarButtom {...props} />,
}}
/>
Following is the CustomTabbarButtom
const CustomTabbarButtom = ({children, onPress}) => {
return (
<TouchableOpacity onPress={onPress} style={styles.customTabbarButtom}>
<View style={styles.view__customTabbarButtom}>{children}</View>
</TouchableOpacity>
);
};
Here the Image source customIcons.nftmaketplace is a static image I have imported at the top of my file.
I am implementing my own Modal, trying to replace the Alert.alert with something more beautiful. I made it to be displayed when needed, but it is not hiding on the button press, but I think I transferred it the needed function. My modal structure is the following:
export const RCModal = ({ title, visible, onButtonPress }) => {
return (
<Modal
animationType='fade'
transparent={true}
visible={visible}
>
<View style={styles.container}>
<Text style={styles.title}>{title}</Text>
<Pressable style={styles.button} onPress={onButtonPress}>
<Text style={styles.text}>OK</Text>
</Pressable>
</View>
</Modal>
)
};
And it is used in the application in the following way:
// ...
const [alertVisible, setAlertVisible] = useState(false);
const [alertTitle, setAlertTitle] = useState();
const [alertOnPress, setAlertOnPress] = useState();
// ...
const winner = (theWinner) => {
setBlocked(true);
setAlertTitle(`${theWinner} win!`);
setAlertOnPress(() => setAlertVisible(!alertVisible));
setAlertVisible(true);
}
// ...
return (
<View style={styles.container}>
<RCModal title={alertTitle} visible={alertVisible} onButtonPress={alertOnPress} />
<ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}>
<Text style={styles.title}>Noughts and Crosses</Text>
<Text style={styles.tip}>Get {winCondition()} in row, column or diagonal</Text>
<View style={styles.buttonsContainer}>
<Text style={styles.turnContainer}>Turn: <Text style={[styles.turn, { color: turn === 'X' ? '#2E86C1' : '#E74C3C'}]}>{turn}</Text></Text>
<TouchableHighlight underlayColor="#000000" style={[styles.button, styles.newGameButton]} onPress={setInitialFieldState}>
<Text style={styles.buttonText}>New game</Text>
</TouchableHighlight>
</View>
<Field state={fieldState} size={fieldSize} onCellPress={onCellPress} />
</ScrollView>
<View style={styles.settingsButtonContainer}>
<TouchableHighlight underlayColor={theme.colors.secondary} style={styles.settingsButton} onPress={onSettingsPress}>
<Image source={require('../img/settings.png')} style={styles.settingsIcon} />
</TouchableHighlight>
</View>
</View>
);
};
When the winner() is called, it is displayed as it should, but when I press OK button, it is not hiding. How can I fix it?
You can use setAlertVisible to change the alertVisible state:
<RCModal title={alertTitle} visible={alertVisible} onButtonPress={() => setAlertVisible(false)} />
The answer was that to set a function like a state variable, I needed to set it like
setAlertOnPress(() => () => setAlertVisible(false))
(2 x () =>)
Hi I'm trying to get an youtube player using react-native-youtube but I'm getting a black screen with an endless loading in android. It works well in iOS. Does someone have an idea why ?
Here is the code :
<View>
<YouTube
apiKey="APIKEY"
videoId={this.state.videoUrls} // The YouTube video ID
play = {this.state.isPlaying} // control playback of video with true/false
fullscreen = {this.state.fullscreen} // control whether the video should play in fullscreen or inline
loop = {this.state.isLooping}// control whether the video should loop when ended
onReady={e => this.setState({ isReady: true })}
onChangeState={e => this.setState({ status: e.state })}
onChangeQuality={e => this.setState({ quality: e.quality })}
onError={e => this.setState({ error: e.error })}
style={{ alignSelf: 'stretch', height: 250 }}
/>
</View>
EDIT : the code of the videoId
<View style = {styles.containerPlaylist}>
<View>
{
this.state.dataVideos.map((item,i) =>
<TouchableHighlight
key = {item.contentDetails.videoId}
onPress = {()=> this.setState({videoUrls: item.contentDetails.videoId})}>
<View style = {styles.vids}>
<Image
source = {{uri: item.snippet.thumbnails.medium.url}}
style = {{flex: 2, height: '100%', backgroundColor:'#fff', resizeMode:'contain'}}
/>
<Text style = {styles.vidText}>{item.snippet.title}</Text>
</View>
</TouchableHighlight>
)}
</View>
</View>
I'm new to React Native and I have a simple app which opens a Webview when a button is pressed. If the navigation state changes, I want to close the Webview. I'm able to know when to close it but unable to find how.
The doc does not mention any function to do it. What's the solution for this?
version : react-native: 0.47.2
you can add it in Modal
_onNavigationStateChange (webViewState) {
this.hide()
}
show () {
this.setState({ modalVisible: true })
}
hide () {
this.setState({ modalVisible: false })
}
render () {
const { clientId, redirectUrl, scopes } = this.props
return (
<Modal
animationType={'slide'}
visible={this.state.modalVisible}
onRequestClose={this.hide.bind(this)}
transparent
>
<View style={styles.modalWarp}>
<View style={styles.contentWarp}>
<WebView
style={[{ flex: 1 }, this.props.styles]}
source={{ uri: `http://google.com` }}
scalesPageToFit
startInLoadingState
onNavigationStateChange={this._onNavigationStateChange.bind(this)}
onError={this._onNavigationStateChange.bind(this)}
/>
<TouchableOpacity onPress={this.hide.bind(this)} style={styles.btnStyle}>
<Text style={styles.closeStyle}>close</Text>
</TouchableOpacity>
</View>
</View>
</Modal >
)
}
for anyone who wants a custom close button or such, you could also do like this.
<SafeAreaView style={{ flex: 1 }}>
<TouchableOpacity onPress={closeWebView}>
<Text>x</Text>
</TouchableOpacity>
<WebView style={{ flex: 1 }} source={{ uri }} />
</SafeAreaView>