We Keep Coding

How to create a link on an image in react-native (web/android/ios)?

I want to display two clickable image with Available on App Store and Available on Google Play on my landing page which I also make with react-native-web.
I am able to create an <ExternalLink /> component, but it does not really look like a normal <a> yet (no hover or effect at the moment => ugly).
import React from 'react';
import { Text } from 'react-native';
const ExternalLink = (props) => (
<Text
{...props}
accessibilityRole="link"
target="_blank"
/>
);
export default ExternalLink;
I have tried to use that component around an <Image /> as you would normally do in web with <a target="_blank" href="https://www.google.com"><Image src={availableOnGooglePlay} /></a>.
More generally, how can I create a link on an image in react-native for all devices (iOS, Android, Web)?

I would use any of the Touchable components to achieve this, I checked the RN Web docs and they've mostly been ported. Here's a small example:
export default class ExternalLink extends Component {
_openLink = async () => {
const { link } = this.props;
if (await Linking.canOpenURL(link)) {
Linking.openURL(link);
}
}
render() {
const { children } = this.props;
return (
<TouchableOpacity accessibilityRole='link' onPress={this._openLink}>
{children}
</TouchableOpacity>
);
}
}
Which you can then use like so:
<ExternalLink link='YOUR_LINK_HERE'>
<Image source='YOUR_IMAGE_URL_HERE' />
</ExternalLink>

React-Spring Error: 'animated' library from react-spring returns ERROR element type is invalid

I am trying to make a simple animation where my image will fade in.
Code below I am importing {useSpring, animated} from 'react-spring'.
I create simple useSpring function logoLoadingScreen. Then I add the function inside the styling for IMAGE; however, there is no animation shown.
import React from 'react';
import {useSpring, animated} from 'react-spring'
import {View,Text,StyleSheet,Image} from 'react-native';
const logoReParty = () =>{
require('../img/img1.jpg')
}
const logoLoadingScreen = () => {
//react Native ANIMATION from 'react-spring'
const fade = useSpring({
from:{
opacity: 0
},
to: {
opacity: 1
}
});
return <View>
<Image source={require('../img/img1.jpg')}
style={[styles.logoBackground, logoLoadingScreen]}
resizeMode={"contain"}
/>
<Text style={styles.loadingLogo}>Loading Screen</Text>
</View>
};
Additionally I tried out this method below to utilized 'animated' library to wrap the VIEW content.
However I get an error message stating 'Invariant Violation: Element type is invalid expected a string or a class/function but got: undefined.
return <animated.View>
<Image source={require('../img/img1.jpg')}
style={[styles.logoBackground, logoLoadingScreen]}
resizeMode={"contain"}
/>
<Text style={styles.loadingLogo}>Loading Screen</Text>
</animated.View>
};
How can I show a fade animation on the image using react-spring?
Additionally, how can I show a fade animation for the whole screen?
Thank you :)
UPDATE
Like mentioned below I created new const AnimatedView = animated(View). However the opacity of the screen does not change and I see no change in the animation.
const AnimatedView = animated(View);
const logoLoadingScreen = () => {
//react Native ANIMATION from 'react-spring'
const fade = useSpring({
from:{
opacity: 0
},
to: {
opacity: 0.2
}
});
return <AnimatedView style={logoLoadingScreen}>
<Image source={require('../img/img1.jpg')}
style={[styles.logoBackground, logoLoadingScreen]}
resizeMode={"contain"}
/>
<Text style={styles.loadingLogo}>Loading Screen</Text>
</AnimatedView>
};
What would be the possible reason animation not showing up on the screen? FYI: there is no more error but instead no animation showing up on the screen.
Again Thank You for your help! ^^
SOLVED
Add the fade inside style which solved my issue with having animation.
return <AnimatedView style={logoLoadingScreen,fade}>
THANKS FOR THOSE WHO HELPED ME :)

Only the html elements are accessible as constant in animated. For example the div is accessible as animated.div. For react native and for your own components there are no such constants. You have to create a new component with animated. And you have to use this new one instead of plain View.
Create a new component:
const AnimatedView = animated(View)
return <AnimatedView style={logoLoadingScreen, ...fade}>

add import
import { Animated} from 'react-native'
change
return <Animated.View>

ReactJS: Two different styles for one component

I have a component that I use twice in the same code, it looks like this:
import React from 'react';
import Container from 'Base/Grid/Container';
import styles from './index.css';
const Columns = props => <Container {...props} className={styles.root} block/>;
export default Columns;
How can i, when importing, apply another style class to the second used Columns?
thanks in advance

You can define another style beside of your styles.root that is passed from the props. Like below:
const Columns = props => <Container {...props} className={[styles.root,props.newStyles]} block/>;
So when you make a Columns component you can pass the specific styles. For example:
<Columns newStyles={{color: 'red'}} />
So you can customize the style for each component which you use.
or if you don't want to use the root style you can make it conditional that if there the newStyle was passed use it. If not just use the styles.root. And the code would be like this:
Columns = props => <Container {...props} className={props.newStyle || styles.root} block/>;

A clean solution is to use react composition. Declare the "base" component in one file, and then export in two different files with two different names the styled one.
// BaseComponent.jsx
export default Column = () => <div>Column</div>;
// RedColumn.jsx
import Column from './Column';
const RedColumn = () => <Column style={{color: "red"}} />;
export default RedColumn;
// BlueColumn.jsx
import Column from './Column';
const BlueColumn = () => <Column style={{color: "blue"}} />;
export default BlueColumn;

How to override styles in a react-chartist component?

I have a simple React JS component that wraps around the really cool react ChartistGraph component. The only issue is that the styling is seemingly overridden by the ChartistGraph default CSS. There is a lot of info on the regular Chartist js package but not much on the React JS package.
As you can see, I'm trying to change the fill color two ways: through style classes and through a prop that supported on the component.
import React from 'react';
import { Paper, withStyles } from 'material-ui';
import ChartistGraph from 'react-chartist';
const styles = theme => ({
graphStyle: {
fill: 'red',
},
});
const CustomChart = ({ classes, graph }) => {
return (
<Paper>
<ChartistGraph
className={classes.graphStyle}
data={graph.data}
options={graph.options}
type={graph.type}
style={{ fill: 'red' }}
/>
</Paper>
);
};
export default withStyles(styles)(CustomChart);
A picture of the styles of the chart

You can use jss's nested rules (included by default in material-ui):
const styles = theme => ({
graphStyle: {
'& .ct-label': { fill: 'red' },
},
});
Full code:
import React from 'react';
import { Paper, withStyles } from 'material-ui';
import ChartistGraph from 'react-chartist';
const styles = theme => ({
graphStyle: {
'& .ct-label': { fill: 'red' },
},
});
const CustomChart = ({ classes, graph }) => {
return (
<Paper>
<ChartistGraph
className={classes.graphStyle}
data={graph.data}
options={graph.options}
type={graph.type}
// style={{ fill: 'red' }} // omitted
/>
</Paper>
);
};
export default withStyles(styles)(CustomChart);

I got into similar issue recently.React-Chartist is built on top of react not material-ui.When you inspect,you found regular css class names,not "material ui-ish" class-names(like MuiTable-root,MuiTable-selectedRow,etc).So ,imho,it won't support material-ui methods (withStyle/makeStyle) and rules.
But what you can do is:-
create a css file and put your styles there
And import it where you want
.You can import it on the main file of your app(index.js or whatever it is) since every css in your app will bundle in one file.

React native drawer menu: can`t find variable styles

I am trying to create a slider menu with the react-native-drawer-menu module. After installing the module . get an error can`t find variable styles. This is the code copied from the example:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Provider } from 'react-redux'
import'../I18n/I18n.js';
import RootContainer from './RootContainer'
import createStore from '../Redux'
import Drawer from 'react-native-drawer-menu';
import {Easing} from 'react-native'; // Customize easing function (Optional)
// create store
const store = createStore()
export default class App extends React.Component {
render() {
// prepare your drawer content
var drawerContent = (<View style={styles.drawerContent}>
<View style={styles.leftTop}/>
<View style={styles.leftBottom}>
<View><Text>Drawer Content</Text></View>
</View>
</View>);
var customStyles = {
drawer: {
shadowColor: '#000',
shadowOpacity: 0.4,
shadowRadius: 10
},
mask: {}, // style of mask if it is enabled
main: {} // style of main board
};
return (
<Drawer
style={styles.container}
drawerWidth={300}
drawerContent={drawerContent}
type={Drawer.types.Overlay}
customStyles={{drawer: styles.drawer}}
drawerPosition={Drawer.positions.Right}
onDrawerOpen={() => {console.log('Drawer is opened');}}
onDrawerClose={() => {console.log('Drawer is closed')}}
easingFunc={Easing.ease}
>
<View style={styles.content}>
<Text>{Object.values(Drawer.positions).join(' ')}</Text>
<Text>{Object.values(Drawer.types).join(' ')}</Text>
</View>
</Drawer>
);
}
}
If I delete the variable from the code then the slide menu works but looks extremely bad.
Do you think that I am supposed to create the style of the menu on my own or shall I imported from somewhere? If I have to create it, how can I know which parameters did it take? Or is it a normal view?

Looks like you have to add styles by yourself to make look Drawer content exactly as you want to. To achieve it you have to create Stylesheet
You can use this answer to get more info about React Native Stylesheet properties (it's pretty much similar to css)
Also maybe this example from drawer repo would be helpful
Cheers.