Is there any way to render components over LottieView like button on top and Lottie animation on background in React Native
<LottieView
style={{ width: 400, height: 600 }}
source={require('../components/user.json')}
autoPlay
loop
>
<Button
onPress={onPressLearnMore}
title='Learn More'
color='#841584'
accessibilityLabel='Learn more about this purple button'
/>
</LottieView>
I use button and text on top and lottieview animation on background by this way:
return(
<View style = {{width:'100%', height:'100%', backgroundColor:'white'}}>
<LottieView source={require('../Animations/74468-rocket.json')} autoPlay loop></LottieView>
<Text style= {{fontSize:32, fontWeight:'bold', marginTop:400}}>hello i am on top</Text>
<Button
title='Learn More'
color='#841584'
accessibilityLabel='Learn more about this purple button'
/>
</View>
)
i hope it will help you..
Related
If I have another text input on the same screen with react-native-gifted-chat component, the keyboard won't work correctly. It will appear in a sec then be dismissed immediately. Happens on both Android and IOS, physical devices and emulator.
I handled keyboard by myself, inside a KeyboardAvoidingView
Demo:
Here my code
<View style={styles.container}>
<View style={styles.container}>
{renderVideo()}
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : undefined}
style={{ flex: 1, justifyContent: "flex-end" }}
>
<View style={{ height: 350 }}>
<GiftedChat
textInputProps={{ onFocus: onFocusHandler, onBlur: onBlurHandler }} //
isKeyboardInternallyHandled={false}
wrapInSafeArea={false}
keyboardShouldPersistTaps="handled"
onSend={onSendMessage}
alwaysShowSend
messages={messages}
infiniteScroll
scrollToBottom={false}
inverted
/>
</View>
</KeyboardAvoidingView>
</View>
<AlertModal ref={alertRef} /> // This modal contain another input
</View>
Need some help making Keyboard for second text input works fine
I have a component that show on iPhone 13 however on iPhone SE which have slight smaller screen some of my elements are not completely showing. I like to know if there a way that I can scale the component so that everything shows on the screen. In this example I have iPhone SE which is cutting off my save button and preview window. however on bigger devices everything show. I do not want this view to be able to scroll.
<>
<Appbar.Header>
<Button
labelStyle={{color: 'white'}}
icon="arrow-left"
mode="text"
onPress={() => goToStep(1)}>
Scenes List
</Button>
<Appbar.Action />
</Appbar.Header>
<View
style={[
styles.container,
{
paddingLeft: insets.left,
paddingRight: insets.right,
},
]}>
<View style={styles.topContainer}>
<TextInput
label="Title (Optional. Default is used if blank)"
mode="outlined"
ref={inputRef}
value={text}
onChangeText={inputText => setText(inputText)}
/>
<Paragraph>
Select a text color then an icon or background color for your button{' '}
<Paragraph style={{color: 'red'}}>
(To reset, press and hold buttons)
</Paragraph>
</Paragraph>
<View style={styles.row}>
<View style={styles.btnWrapper}>
<View style={styles.textBtnContainer}>
<ColorPickerButton
containerStyle={styles.styleBtn}
useText={'TEXT COLOR'}
selectedColor={setSelectedTextColor}
/>
<ColorPickerButton
containerStyle={styles.styleBtn}
useText={'BG COLOR'}
selectedColor={setSelectedBgColor}
/>
<UploadIcon path={setImage} />
</View>
<Button
icon="content-save"
mode="contained"
onPress={saveSelections}>
Save
</Button>
</View>
{screen.orientation === 'Landscape' && (
<View style={styles.previewPortrait}>
<PadPreview item={padSelections} />
</View>
)}
</View>
</View>
{screen.orientation === 'Portrait' && (
<View style={styles.previewLandscape}>
<PadPreview item={padSelections} />
</View>
)}
</View>
</>
There is no general solution for dealing with smaller devices that work out of the box. Most of the time, you have to explicitly deal with this yourself. One way to do this is by retrieving the screen dimensions and than change the design layout and font sizes yourself.
You can do this by using the following code snippet.
import { Dimensions } from "react-native"
const width = Dimensions.get("window").width
const height = Dimensions.get("window").height
An iPhone SE in the first generation has a logical screen width of 320 pixels and a logical height of 568 pixels.
In your specific case you might want to implement a different layout, if the screen width is less or equal to 320 pixel. You could also try to scale the sizes of your components responsively. For the save button this could look as follows.
const width = Dimensions.get("window").width
...
<Button
style={{width: width > 320 ? "100%" : "70%"}}
icon="content-save"
mode="contained"
onPress={saveSelections}>
Save
</Button>
You could also play around with different flex layouts, but you eventually will need to implement different behaviors for very small devices yourself.
I am adding a slider to my App with this code
<View>
<SafeAreaView style={HEADER}>
<SliderBox
style={{ height: '100%' }}
currentImageEmitter={index => setCurrentSliderNumber(index)}
images={data.images}>
</SliderBox>
</SafeAreaView>
</View>
this is the result
I am trying to add a button on the bottom, on top of the slider, so I changed the code this way
<SafeAreaView style={HEADER}>
<SliderBox
style={{ height: '100%' }}
currentImageEmitter={index => setCurrentSliderNumber(index)}
images={data.images}>
</SliderBox>
</SafeAreaView>
<View>
<Button
style={styles.signUpButton}
appearance="ghost"
status="control"
>
Sign Up
</Button>
</View>
</View>
But the result is not the one expected
The Safeareaview is on top of your buttons. Try zIndex
https://docs.expo.dev/ui-programming/z-index/
else post your styling. may position: 'absoulte' will work too
I am trying to render a clickable image on my map. I tried this but it did not work, as the image never shows and no error is shown.
<MapView.Callout>
<View style={styles.callout}>
<Image
style={{width: 66, height: 58}}
source={{uri: '../assets/whaleimage.png'}}></Image>
</View>
</MapView.Callout>
I'm temporarily using this while I find a solution.
<MapView.Callout>
<View style={styles.callout}>
<Button title='Send Sonar' onPress={() => console.log('Clicked')} />
</View>
</MapView.Callout>
How can I render a clickable image on my MapView?
const MyCustomComponent = Animatable.createAnimatableComponent(Icon);
return(
<View>
<Animatable.Text style={styles.textStyle}>
Made with{' '}
<MyCustomComponent
animation="pulse"
iterationCount="infinite"
name="ios-heart"
style={{ fontSize: 18 }}
color="red"
/>
</Animatable.Text>
</View>
);
I'm a beginner learning React Native Animation. If you have time then please help me out in this.
I want to added Animation to MyCustomComponent but its happening can you tell me why so. Thank You.
You can't do that, if it's animatable text you can expect o animate tex, if you want a nested view, wrap it in a animatable view, or a normal view, and animate the text and component by separate
<View>
<Animatable.Text style={styles.textStyle}>
Made with{' '}
</Animatable.Text>
<MyCustomComponent
animation="pulse"
iterationCount="infinite"
name="ios-heart"
style={{ fontSize: 18 }}
color="red"
/>
</View>
It will help if you post a gif of the expected result