I am trying to have multiple sticky headers in a React Native scrollview using stickyHeaderIndices prop but it only sticks the last header.
For example the following code with only stick This is the title 2 when I would expect to have the three titles on the top of the screen.
export default function App() {
return (
<ScrollView style={styles.container} stickyHeaderIndices={[0, 1, 2]}>
<Text style={styles.title}>
This is the title 0
</Text>
<Text style={styles.title}>
This is the title 1
</Text>
<Text style={styles.title}>
This is the title 2
</Text>
<AssetExample />
<AssetExample />
<AssetExample />
<AssetExample />
<AssetExample />
</ScrollView>
);
}
Here is a reproduction code: https://snack.expo.dev/#abumalick/scrollview-multiple-sticky-headers. You can check in android and iOS.
After seeing this implementation: https://github.com/deepseapenguin/react-native-sticky-header-flatlist#result
I understand that the purpose of sticky headers indices is to display only one header at a time. When the user scrolls to a new sticky header, it replaces the previous one. It is not intended to display multiple headers at a time.
Related
If i click on Lungs Banks i want to move to another screen How can i do this
<KeyboardAvoidingWrapper>
<WelcomeStyledContainer>
<StatusBar style="dark" />
<OrganHeading>
<OrganHeadingText>Donate Able Organ</OrganHeadingText>
</OrganHeading>
<View style={styles.container}>
<View style={styles.Box}>
<View style={styles.inerBox}>
<CardStyle>
<CardImage source={require('./../assets/organImage/lungs.png')} />
<CardText>Lungs Bank</CardText>
</CardStyle>
</View>
</View>
Below solution will work for you if you are using React-navigation.
UI Screen:
<CardText onPress={()=>navigation.navigate("YOUR SCREEN NAME HERE")}>Lungs Bank</CardText>
Card Text Component:
const CardText = ({onPress}) => {
return <Text onPress={onPress}>{props.children}</Text>;
}
Thanks!
You can use react-navigation
library to get started with navigation in react-native.
I'm using a Button component from react-native-elements and for the title prop I would like to underline one of the words, is this possible?
button.js:
<Button
buttonStyle={styles.buttonStyle}
titleStyle={styles.titleStyle}
containerStyle={styles.containerStyle}
title={title}
onPress={onPress}
disabled={disabled}
disabledStyle={[styles.disabledStyle]}
/>
I'm using it like this:
<Button
title={'First line \nSecond line'} // <- How to underline First & Second?
onPress={() => console.log('pressed button')}
/>
How do I underline the words First and Second?
I tried doing title={`${First} line \n${Second} line`} where First and Second is a <Text style={{textDecoration: 'underline}}>First</Text> but I'm getting [object, Object] since it's not an expression
<Button> implementation in React Native Elements indeed does support passing component as title property value - but in your code you try to pass those as text. That's what you might try instead:
const ButtonTitle = (
<>
<Text style={{textDecoration: 'underline'}}>First</Text>
<Text style={{textDecoration: 'underline'}}>Second</Text>
</>
)
<Button title={ButtonTitle} />
For situations like this, I generally will use React.ReactNode as the type for title instead of a string. This will be backwards-compatible, as strings are valid ReactNodes, but it also allows you to do this:
// style example
const style = Stylesheet.create({
underline: { textDecoration: 'underline' },
});
// Implementation in component
title={
<Text>
<Text style={style.underline}>
First line
</Text>
<Text style={style.underline}>
Second line
</Text>
</Text>
}
Reminder that the original will also still work as ReactNode is a type which includes string:
title={'First line \nSecond line'}
I've tried different methods to render an html content from json response to react native.But I got failed in these methods
https://www.npmjs.com/package/react-native-render-html
https://www.npmjs.com/package/react-native-htmlview
Because there is no package that support table tag of html. So I thought to use WebView in react native.But that also disappointed me. There is no field to give html content from json response in WebView. I've tried the following.
But these are not working
code
<WebView
source={{uri: `<h1>Hello World</h1>`}}
style={{marginTop: 20}}
/>
In my case I'm fetching server response.I've double checked whether response is coming ,the response from server is fine.
return (
<Container style={styles.container}>
<View>
{this.state.section.map(article =>
<View>
<WebView
source={{uri:article.data.description}}
style={{marginTop: 20}}
/>
</View>
)}
</View>
</Container>
);
Is there any other method for rendering html content other than these. Please I'm stuck with this.I don't know what to do.This cause delay in my project.So I'm really disappointed.Please any help would be really appreciable.
I've solved the problem.I was using native-base ui kit.So when I tried to render WebView within Container or Content it won't render.So I removed it with View component but ScrollView don't work.So I've made some changes to Container and it is working perfect.But still remains a problem that border of html table is not displaying.But otherwise it is perfect
This is my working code
<Content contentContainerStyle={{ flex: 1 ,padding:15}}>
{this.state.section.map(article =>
<WebView
source={{ html: article.data.description}}
javaScriptEnabled={true}
style={{backgroundColor: 'transparent'}}
/>
)}
</Content>
I am using React-Navigation but I guess You don't really need to have a prior knowledge about it.
So I have a header Component which looks like this
const Header = (props) => {
return (
<View style={headerContainer}>
<View>
<Button onPress={() => props.navigation.navigate('Home')}
title="Go Back"/>
</View>
<Text style={header}> Knicx
<Text style={headerSecondary}> Crypto Ticker </Text>
</Text>
</View>
)
}
Now, In the above notice the button, Which I am currently showing on all the pages
<Button onPress={() => props.navigation.navigate('Home')}
title="Go Back"/>
But I don't want it to be there on some specific pages, like HomeScreen to say the least.
Now, One solution is to remove the <Header /> component in my homepage, Copy the above code snippet, past it in my HomeScreen and remove the Component ( sort of like hardcoding ) or two create two Header component, one with button and one without button
[Question:] But I was thinking if we could toggle the visibility of button dynamically or stack it on the top of <Header /> ? Can someone please tell me how can we do it? (No, We can set the opacity of the button to zero and change it whenever we need it)
[Update:] We can use redux to manage/pass the state but the problem is that in React-native we do not have display: none and I don't want to change use the opacity
Send showHomeButton: boolean as a prop to header
const Header = props => (
<View style={headerContainer}>
{this.props.showHomeButton && (
<View>
<Button onPress={() => props.navigation.navigate('Home')} title="Go Back" />
</View>
)}
<Text style={header}>
{' '}
Knicx
<Text style={headerSecondary}> Crypto Ticker </Text>
</Text>
</View>
);
Here is my phone screen I tried ScrollView with keyboardShouldPersistTaps, but it didn't work. I have a ScrollView for Autocomplete suggestions, and when user can types there, they should also be able to select from suggestions. However, without closing keyboard, it is not possible in my case. Here is my work
<ScrollView
scrollEnabled={false}
keyboardShouldPersistTaps={true}>
<View style={{ maxHeight: 220 }}>
<ScrollView style={Style.suggestionContainer}
scrollEnabled={true} >
{this.state.showOptions.map(this.renderSuggestions)}
</ScrollView>
</View>
</ScrollView>
.
.
.
private renderSuggestions(option: MultiInputQuestionOption) {
return (
<TouchableOpacity onPress={this.addSelection.bind(this, option)} >
<Text style={Style.suggestions}>
{option[this.props.titleKey]}
</Text>
</TouchableOpacity >
)
}
Is there any possible solution?
You need to pass the key keyboardShouldPersistTaps=‘handled’ on scroll view which contains the TextInput:-
<ScrollView keyboardShouldPersistTaps=‘handled’>
...
<TextInput />
</ScrollView>
And if you are having issue inside of a modal then You need to pass key keyboardShouldPersistTaps=‘handled’ on All scrollview which are in component stack for the screen. In the ancestors/parent of the Modal also.
Like in my case:
const CountryModal=(props)=>{
return(
<Modal
visible={props.visible}
transparent={false}
{...props}
>
<ScrollView keyboardShouldPersistTaps=‘handled’>
…
</ScrollView>
/>
)
}
In Parent class:
In the parent class where ancestors of modal is there. You need to pass key keyboardShouldPersistTaps=‘handled’`.
class Parent extends Component{
render(){
return(
<ScrollView keyboardShouldPersistTaps=‘handled’> // pass ‘handled’ here also
…
<CountryModal /> // Its the same modal being used as a component in parent class.
</ScrollView>
)
}
Try adding
keyboardShouldPersistTaps={'always'}
to the second ScrollView as well.
Use the 'handled' value for keyboardShouldPersistTaps property because the true value is deprecated. use the keyboardShouldPersistTaps in two ScrollViews and handle your keyboard state in somewhere else by using Keyboard.dismiss() function.