I am attempting to create a simple tab component generated by a functional component using react-tabs. Here is what I thought would be a fairly simple and straightforward approach:
export default function TabScreen({ navigation }) {
return(
<View>
<Tabs>
<TabList>
<Tab>Tab 1</Tab>
<Tab>Tab 2</Tab>
</TabList>
<TabPanel>
<Text>
Content 1
</Text>
</TabPanel>
<TabPanel>
<Text>
Content 2
</Text>
</TabPanel>
</Tabs>
</View>
);
}
However this returns the following error: Uncaught TypeError: Object(...) is not a function
How can I resolve this?
Also- if anyone has a different library they'd reccomend for something like this I’m open to that as well.
Related
I have a component that i'm using 3 times with different data which I am able to complete with the following code;
<div>
<Container className="mt-5">
<Row>
{author_data.map((authors) => {
return (
<Col key={authors.id} className="pe-5 ps-5">
<Author
key={authors.id}
image={authors.image}
author={authors.author}
description={authors.description}
handleClick={(author) => setAuthor(author)}
/>
</Col>
);
})}
</Row>
</Container>
</div>
);
However Im looking to change the CSS on each component once I click on one of the Author components. something like the below using native JS.
document.getElementById("author1").classList.add("addGrayScale");
document.getElementById("author2").classList.add("addGrayScale");
document.getElementById("author3").classList.remove("addGrayScale");
I have used the useState and useContext hooks but I can't seem to get it to work because the Author component will receive the same props. Should I create separate components for each Author? or is there another way to do this.
I have been able to fix my problem now thanks to Stephan answer
I'm having a bit of problem with how navigation works in React Native.
Basically what I'm trying to do is this :\
While I'm in the Home stack navigate to the SubFeed stack from the Feed function called in Home.
Here is my code
import Feed from './Feed'
function Home({ navigation }) {
return (
<ScrollView>
<Feed/>
</ScrollView>
Home.js
function Feed({ navigation }) {
return (
<View>
<Button title="nav1"
onPress={() => navigation.navigate('SubFeed')}/>
<Button title="nav2"
onPress={() => navigation.navigate('Home', {screen: 'SubFeed'})}/>
</View>
Feed.js
In my App.js I create my stacks like this:
<NavigationContainer>
<StatusBar
backgroundColor="#ffa31a" />
<Stack.Navigator initialRouteName="Project">
<Stack.Screen name="Project" component={Home}/>
<Stack.Screen name="Feed" component={Feed} />
<Stack.Screen name="SubFeed" component={SubFeed} />
</Stack.Navigator>
</NavigationContainer>
App.js
I found that in other file where I use navigation I don't need to import anything to make the navigation works as long as I have { navigation } in my function.
The problem is that whenever I try to press either of the buttons I keep getting the same error:
TypeError: undefined is not an object (evaluating 'navigation.navigate')
\
When I search for an answer I keep seeing things about screens but it doesn't seem to be working in my case.
I think the problem comes from the fact that I try to change the stack outside from home, but I can't understand why.
If you have any suggestion or even better the answer to my problem I would really appreciate it.
In your code, Feed component doesn't know about navigation property. So, you can pass it as a prop form the parent Home or you can use react-navigation-hooks and use const { navigate } = useNavigation(); inside Feed component.
Getting this warning: Warning: React does not recognize the 'textColor' prop on a DOM element (everything else is working).
Using it in my component this way:
import { ImageWithFallback, Paper, Tabs, Tab, Typography, Tooltip,} from '#material-ui-core/dist';
<Paper square className={classes.root} data-test-id={testMediaEditRenditionTabPanel.paper}>
<Tabs
value={tabState}
variant="scrollable"
onChange={handleChange}
orientation="vertical"
indicatorColor="primary"
centered
textColor="primary"
className={classes.tabs}
>
</Tabs>
</Paper>
Thanks in advance.
Did you try with textcolor instead of textColor? I think the material UI of your project seems not to be the latest version. Please let me know how it works.
I have a functional REACT component, code is as follows
const MobileListing = (props) => {
function handleClick() {
console.log('in cardClick');
}
return (
<div>
<Row>
<Card onClick={() => handleClick()} style={{cursor : 'pointer'}} >
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</Row>
</div>
);
}
export default MobileListing;
I want to make the entire card clickable. I read through a post on stack overflow Making whole card clickable in Reactstrap which talks about using an anchor tag, but that doesn't work for me.
Can someone help me understand what I am doing wrong?
A card looks like this on my site and I want to make the whole card clickable.
You can use the onClick either on the top-level div element for this, or, in case there would be more cards inside the Row you can wrap each with a div and give it the onClick, property.
such like:
<div>
<Row>
<div onClick={handleClick}>
<Card style={{ width: '18rem', cursor : 'pointer' }} >
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</div>
</Row>
</div>
It is better to wrap it around with an anchor tag because clickable things should be links if they go to places, and should be buttons if they do things.
Using click handlers with other things just make things inaccessible.
I made a DEMO
so the problem is that third button isn't working. The only difference between buttons is the way I passed them in Header component.
<Header secondButton={<View style={styles.button}><Text>Second Button</Text></View>}
thirdButton={<ThirdButton />}
onPress={this._handlePress} />
My solution was to turn this ...
<TouchableWithoutFeedback onPress={props.onPress}>
<Contents {...props} />
</TouchableWithoutFeedback>
into this...
<TouchableWithoutFeedback onPress={props.onPress}>
<View>
<Contents {...props} />
</View>
</TouchableWithoutFeedback>
answered by #brentvatne on github
I was able to fix it in this example - notice that I changed the
<View> in your ThirdButton to include {...this.props}
<View style={styles.button} {...this.props}>
.. etc
</View>
The reason for this is that TouchableWithoutFeedback will set responder
props on that component, but ThirdButton is just a composite component
with no backing UIView, so I want to pass those on to the View.
See what I'm talking about here