I have a gif here:
And I have my index.ios.js here:
return (
<View style={styles.container}>
<Image
style={{width: 200, height: 400}}
source={{uri: this.state.path}} />
</View>
However this is what the output is:
Any ideas on how to make it play the whole gif?
Your output gif opens up Safari instead of an iOS application. Could you post output gif when trying to open the app?
Also you might want to confirm value of this.state.path which you are using as source of the gif.
It needs to have the extension .gif in it to work. For e.g
<Image source={{uri: 'http://www.urltogif/image.gif'}} />
//or
<Image source={require('./path/to/image/local.gif')} />
You can find a working example here https://snack.expo.io/ByglJIzD-
Works for me, fresh new project with React Native 0.47.1.
The render function looks like this:
render() {
return (
<View style={styles.container}>
<Image style={{width: 200, height: 400}}
source={{uri: 'https://user-images.githubusercontent.com/13806068/28982817-ffd1fdc2-790b-11e7-9bc2-a2d1135ca232.gif'}}/>
</View>
);
}
Related
I am making a comments section for my app with React-Native and building for ios. When the keyboard is up to post a comment I can't immedietley press the TouchableOpacity button that submits the post. I need to first press it to close the keyboard then press again to submit.
const CommentCreation = React.forwardRef((props, ref) => {
return (
<View style={commentCreationStyles.container} >
<TextInput
value={props.message}
ref={ref}
style={commentCreationStyles.input}
onChangeText={val => props.setMessage(val)}
autoFocus={false}
multiline={true}
returnKeyType={'next'}
placeholder={'Enter Your Comment'}
numberOfLines={5}
replyBool={props.replyBool}
/>
<TouchableOpacity
style={commentCreationStyles.submitButton}
onPress={props.addCommentEnabled ? () => {props.addComment(); Keyboard.dismiss()} : null}
>
<Ionicons name="ios-send" size={36} color="#D7D7D7" />
</TouchableOpacity>
</View>
)
})
I have tried keyboardShouldPersistTaps="handled" and its variations in conjunction with ScrollView in addition to View and replacing View. I have tried these on all levels of the tree. I'm at a loss, any help is greatly appreciated!
Add keyboardShouldPersistTaps='handled' in the first View as
<View style={commentCreationStyles.container} keyboardShouldPersistTaps='handled' >
https://imgur.com/a/c6wxosN
Hi, can somebody help me, how to stretch component all over iPhone screen, even notch? If you look at that image, I would like to have it even, where clock and battery icons are.
I've already tried to use SafeAreaView, but it didn't work.
const { isLoading, loadingError } = this.state;
return (
<View style={styles.container}>
{isLoading && this.renderLoading()}
{
loadingError
? this.renderLoadingError()
: <WebView
style={styles.radar}
onLoad={this.onLoaded}
onLoadStart={this.loadingStarted}
onLoadEnd={this.onLoadFinished}
onError={this.onError}
source={{ uri: this.props.radarUrl }}
/>
}
</View>
);
}
Thank you in advice!
Im use this library react-native-swipe-gestures to listen to swipe left and right and inside it i have scrollview but not work ,
i search in the problem and i found that PanResonder prevent other interactions which implement in react-native-swipe-gestures library
code example :
<GestureRecognizer
// onSwipeUp={(state) =>{}}
// onSwipeDown={(state) =>{}}
onSwipeLeft={(state) => this.onSwipeLeft(state)}
onSwipeRight={(state) => this.onSwipeRight(state)}
config={{
velocityThreshold: 0.5,
directionalOffsetThreshold: 100
}}
style={Styles.baseContainer} >
<ScrollView onScroll={() => console.log('scrolled')}
style={styles.scroll_view} >
<Text style={{fontSize:96}}>Scroll this</Text>
<Text style={{fontSize:96}}>Scroll this</Text>
<Text style={{fontSize:96}}>Scroll this</Text>
<Text style={{fontSize:96}}>Scroll this</Text>
<Text style={{fontSize:96}}>Scroll this</Text>
</ScrollView>
</GestureRecognizer>
i need to fix this issue !!
Like the title says I would like to create something like the Picker but instead of scrolling between text I would like to be able to scroll between cards that are View components. Is there a way to do this with the built in Picker or is there a npm packet somewhere which achieve this effect?
My code with Picker that is not working and only displaying the label
<View>
<Text>{this.state.language}</Text>
<Picker
selectedValue={this.state.language}
style={{ height: 250, width: "100%",}}
onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
<Picker.Item label="Java" value="java">
<View>
<Text>HELLO THERE GENERAL KENOBI</Text>
</View>
</Picker.Item>
<Picker.Item label="JavaScript" value="js" />
</Picker>
</View>
This is somewhat the effect I would like to achieve, being able to scroll between cards
after upgrading from react-native#0.26 activity indicator of RefreshControl sometimes appears in right corner of ScrollView on iOS.
I am using RefreshControl as correctly as documentation says:
...
<ScrollView
style={styles.container}
refreshControl={
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={this.onPullToRefresh}
/>
}>
<View>
...
</View>
</ScrollView>
...
and here is what sometimes happening while not refreshing:
Now I am running react-native#0.30.0 and this indicator is still annoying me.
Am I the only who faces this issue?
Solved by setting background to transparent color...
...
<ScrollView
style={styles.container}
refreshControl={
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={this.onPullToRefresh}
style={{backgroundColor: 'transparent'}}
/>
}>
...