load image as prop in react-native - javascript

so I have a customHeader component where I am trying to load images into like so
<Image source={props.logoImg} style={styles.icon} />
and on the page I'll pass in the prop like so
<CustomHeader
navigation={props.navigation} //call props.navigation in component
primaryColor={primaryColor}
coName={coName}
logoImg={require('../content/...some image...'}
/>
This way it doesn't throw an error, but it doesn't load. I know it has something to do with passing it as a prop because I can load images straight into the screens. I'm just not sure what I'm doing wrong or what I'm missing here.
I have tried using the require inside of the component, but that throws an error at compile because react-native needs the images to be "required" at compile.

this should work
in the Wrapping component
<CustomHeader
imageUri={'../content/...some image...'}
/>
and then in the inner component
<Image source={require(props.imageUri)} />

Related

How to change the styling of a component in another component ? React

First I apologize if this question has been answered elsewhere. I'm still learning.
Assuming we have a parent component that has children components inside of it, so :
in App.js:
<>
<Advertisement title="Free Shipping For Orders Above 150 USD ! " />
<NavBar />
<LandingSection />
<Featured />
<Explore />
<Shop />
<RecommendedVideos />
<AsSeenOn />
<Footer />
</>
Now, we all know that each component has it own css file, however, if I want to change specific CSS attributes/styles to fit with the new component and I just want it in this specific component, in our case it is App.js. What should I do ? any tutorials on this topic ?
Also ... What is the difference between using
import styles from './styles.css
className = {styles.someName}
and using
styled-components library ?
and most importantly, in professional/real-world apps, what method do developers use ?
Each component should use either css modules or styled component. That way style will be scoped to that component.
If you use plain css then it might clash with other components styles.

React Admin: ReferenceArrayField is not passing data to child

I am trying to display a datagrid of media of a product from a list of media ids. Using ReferenceArrayField component, the getMany() function of the media data provider is called. The fetching is working fine.
However, the data fetched is not passed by the ReferenceArrayField component to its child DataGrid.
I really don't get what is happening here, might be a bug.
<ReferenceArrayField label="Médias" reference="mediaResource" source="mediasIds">
<DataGrid>
<UrlField source="finalUrl" label="Miniature" target="_blank" />
<TextField source="type" />
</DataGrid>
</ReferenceArrayField>

How would I go about listening to a route change in reach router?

I have a component I'm trying to build pagination functionality for
<PageNumber>
<StyledLink to="/visited/page/1">1</StyledLink>
<StyledLink to="/visited/page/2">2</StyledLink>
</PageNumber>
so when I click the link it should change the path (which it does)
the problem is my component does not re-render so I can't seem to then display page 2 (even though the route has changed)
how can I listen to the changes in my component? I'm using hooks
I've searched the docs and all the options seem to indicate you should only listen to route changes using LocationProvider and stuff for testing
<Router>
<Visited path="visited/page/:id" />
<AllCountries path="all" />
<Map path="map" />
<Redirect from="visited" to="page/1" />
</Router>

React: Passing Props from grandparent to grandchild

I have a problem with passing props in react. This is my folder structure:
src
Component
Button.js
Container
PageContainer.js
Page
Page.js
I am using Bootstrap 4 to create a Button within Button.js:
<div>
<a className="btn btn-primary sharp" href={this.props.url} role="button">{this.props.btnName}</a>
</div>
There is nothing else in the class Button. So now I put a Button into the class PageContainer:
<div>
<Header/>
<Button url={this.props.urlBack} btnName="Back"/>
<Button url={this.props.urlNext} btnName="Next"/>
</div>
As you can see I passed a title to the buttons: Back and Next. That works fine. I could now add an url and it would work fine, but that's not what I want.
I added the PageContainer to the class Page such that I can add an url at this level:
<div>
<PageContainer urlBack="/" urlNext="/nextPage"/>
</div>
For some reason this is not working. Can someone explain me how I can pass props from grandparent to grandchild? In the documentation it says that this is the way how to do it. I also get no error, because the prop is not passed from Page to PageContainer. A console.log(this.props.urlBack) results in undefined.
PS: Maybe you asking why I am using the Page.js or for what reason do I have the PageContainer. First: There are far more components, I just left them out. Second: I wanna reuse the PageContainer for several pages such that I just have to change the url.
It doesn't look like you are passing props to your <VideoContainer /> component. You are merely assigning it as a routed component <Route />
Your answer can be found here:
React react-router-dom pass props to component
i.e.
<Route path="/algorithmus/bubblesort/video"
render={(props) => <VideoContainer {...props} />}
/>
However, I don't think this will get your your this.props.url and this.props.btnName. this.props.path, yes ..but you may have to revisit some logic there.
UPDATE:
After reading your comment and checking your repo, it doesn't look like there's anything wrong with your setup. I have emulated your BubblesortVideo -> VideoContainer hierarchy at the following:
https://stackblitz.com/edit/react-eaqmua

Reactjs: Changing props outside the main scope

I made a test where I do React.render() in a child component and pass a prop to it. The app structure looks like:
<App>
<Child />
</App>
Then in <Child />, I render <Outside /> component with another React.render(). When I checked in Chrome React firebug, the App structure is:
<App>
<Child />
</App>
<Outside />
instead of:
<App>
<Child />
<Outside />
</App>
However, when passing a {selected : true } state from <App />, it displays well as a prop in <Outside />, but when I make a state change to { selected : false } in <App />, both <Child /> and <Outside /> don't receive the updated prop. I think it happens because <Outside /> is out of the <App /> scope so the data flow doesn't flow well. (Sorry for my English)
You can check the test here: http://jsbin.com/yazaqo/1/edit?js,console,output
What I'm trying to ask is: Is there any other way to update a component which is outside the App scope?
The Child component is receiving the updated prop, its just not being logged to the console.
Only render and componentWillReceiveProps are invoked when a component receives new props, so if you move the console.log to either one of those methods, you'll see the updated value.
This is also why Outside is not receiving the updated prop. You're rendering it in componentDidMount, which is only invoked once, when the component is mounted.
It should be rendered in Child's render method the same way Child is rendered in the App component. The other option would be to render it in componentWillReceiveProps, although you may run into some problems doing it that way.
Hope this helps.

Categories