We Keep Coding

circle outline for fontAwesome icons in react native

I want to use the fontAwesome + icon such that it is in the middle of a circle. I want to use it as one icon item. I read that we can use it along with the circle icon and place it inside that but I couldn't make it work.
import IconFA from 'react-native-vector-icons/FontAwesome';
<IconFA
name="plus"
size={moderateScale(30)}
color="black"
style={styles.thumbnail}
/>
{/* <IconFA
name="circle-thin"
size={moderateScale(67)}
color="white"
/> */}
thumbnail: {
height: 68,
width: 68,
position: 'relative',
},
Alternatively, I read about 'stacked' font awesome icons but couldn't understand how to use it in react native.
Reference: https://jsfiddle.net/1d7fvLy5/1/
Snack Expo:
https://snack.expo.io/9Ild0Q1zG
I want to make something like this:
I am also open to using a <Thumbnail> if I find a similar icon's link but I couldn't find any such free icon online.

The JSFiddle example that you posted creates the circle using a CSS border with border-radius to make it circular. We can do pretty much the same thing in react-native, though borderRadius in react-native can only be a fixed number and not a percent (edit: this limitation is specific to typescript since the borderRadius property has type number. Percentage strings do work at runtime).
You can tweak this code however you want, but this will get the job done. You can use IconFA and CircleBorder as two separate nested components but I also made a component IconInCircle which combines the two.
const IconInCircle = ({ circleSize, borderWidth = 2, borderColor = 'black', ...props}) => (
<CircleBorder
size={circleSize}
borderWidth={borderWidth}
borderColor={borderColor}
>
<IconFA {...props} />
</CircleBorder>
);
const CircleBorder = ({ size, borderWidth, borderColor, children }) => (
<View
style={{
width: size,
height: size,
borderRadius: 0.5 * size,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
borderColor,
borderWidth,
}}>
{children}
</View>
);
The IconInCircle component takes three props specific to the border: circleSize, borderWidth, and borderColor. All other props are passed through into the IconFA child component.
Basically what we are doing is placing the icon inside of a fixed-size View with a circular border and centered contents.
Now we can use it like so:
<IconInCircle
name="plus"
size={30}
color="black"
style={styles.thumbnail}
borderWidth={1}
circleSize={50}
/>
Expo Link

Try this, just adjust according to your needs, and also don't forget to support other browsers for flex.
const styles = StyleSheet.create({
thumbnail: {
height: 68,
width: 68,
position: 'relative',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
border: '1px solid #333',
borderRadius: '50%'
},
});

import IconFA from 'react-native-vector-icons/FontAwesome';
<View style={{
position:'relative',
justifyContent:'center',
alignItems:'center',
width:40,
height:40,
backgroundColor:'black'
}}>
<IconFA name='circle-thin' size={40} color='grey'/>
<IconFA name='plus' size={20} color='white' style={{position: 'absolute', zIndex: 99}} />
</View>
I am new to ReactNative, but above snippet should work in your case
Snack Expo

React Native Tooltip with Icon and TouchableHighlight?

I am working on a [Tooltip][1] the users can click for an explanation. it looks like this
<Tooltip popover={<Text>my explanation</Text>} backgroundColor={'rgb(255, 179, 16)'}>
<Text>?</Text>
</Tooltip>
The problem with this is that the user needs to click on top of the exact text to work, I wanted to create something like an invisible box around it that the user can click anywhere inside of it to trigger it.
<TouchableHighlight>
<View style={{height: 48, alignSelf: 'stretch', justifyContent: 'center', backgroundColor: '#2196F3'}}>
<Tooltip popover={<Text>my explanation</Text>} backgroundColor={'rgb(240, 179, 16)'}>
<Text>?</Text>
</Tooltip>
</View>
</TouchableHighlight>
and also tried this
<Tooltip popover={<Text>my explanation</Text>} backgroundColor={'rgb(240, 179, 16)'}>
<Icon.Button name="help-circle"
backgroundColor="##3b5998"
borderColor="##3b5998"
color="##3b5998">
</Icon.Button>
</Tooltip>
but none of these two works. anyone can advise on what's wrong with my code and how I can fix it.
also, any recommendation on how I should deal with text in the future when I need them to be clickable and I want to extend the clickable area to a larger area than just the text itself.
thanks

Try this
<Tooltip popover={<Text>my explanation</Text>} backgroundColor={'rgb(240, 179, 16)'}>
<View style={{ height: 48, alignSelf: 'stretch', justifyContent: 'center', backgroundColor: '#2196F3' }}>
<Text>?</Text>
</View>
</Tooltip>
Basically you have to wrap the element inside tooltip
Also look at hitslop property of View to increase touchable area of view , its an alternative to increase touchable area by height and padding

How can I set an icon within a text input?

I am trying to set an icon inside a text input.
I know, there is this answer.
But it is not working as expected since the icon is outside of the TextInput, I need it to be inside.
This is what I am obtaining so far:
This is my code:
<View style={styles.InputContainer}>
<Ionicons
style={styles.IconWithinInput}
name="ios-search"
size={24}
/>
<TextInput
style={styles.AddEditInputs}
onChangeText={text => this.setState({ text })}
value={this.state.text}
/>
</View>
And the styles:
AddEditInputs: {
flex: 1,
height: 40,
borderWidth: 1,
},
IconWithinInput: {
padding: 10,
},
InputContainer: {
flexDirection: 'row',
},
I made the input borders like a rectangle to show you better what I meant to say.
The last design will be like this:
And as you may see, the input border is at the bottom of the icon too.
What else do I need to achieve what I need?

You cannot directly put icon on the textInput. What you can do is wrap the icon and textInput with the view with flexDirection set to row and provide the left padding to the icon so that it seems to appear as in textInput. If you want to do so you can use something like this
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}}>
<View style={{ flexDirection: 'row' }}>
<View style={{justifyContent: "center", marginRight: 5 }}>
<Image
source={{
uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png',
}}
style={{ width: 10, height: 10 }}
/>
</View>
<TextInput placeholder="Enter your name" />
</View>
</View>
But my suggestion is to use the Input component of react-native-elements as it has leftIcon as props. You can find more information at here

<View style={{flex: 1, flexDirection: 'row'}}>
<Image
source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
style={{borderWidth: 1,width: 40, height: 40}}
/>
<TextInput
onChangeText={(text) => this.setState({text})}
value={this.state.text}
style={{borderWidth: 1, height: 40, borderColor: 'grey'}}
/>
<View>
Wrap the component with flex and provide width for the icon. You can set the icon by having some wrapper around since it can not be included inside textbox.

How can I center the title in Appbar.Header in react-native-paper?

As you can see in the docs, the default positioning for the title in react-native-paper is left-aligned. I've seen multiple questions and answers about how to implement a centered title both for Android Native as well as React Native's StackNavigator, but I am having no luck pulling off the same effect with react-native-paper.
So far I have tried using the style parameter in Appbar.Header to pass in { textAlign: 'center' } or { flexDirection: 'row', justifyContent: 'space-between' }, but nothing seems to work. I'm not very impressed with react-native-paper's lack of documentation on overrides, but I still hope there's a way to do what I'm looking for.
const styles = { header: { textAlign: 'center' }}
<Appbar.Header style={styles.header}>
<Appbar.Action icon="close" onPress={() => this.close()} />
<Appbar.Content title={title} />
<Button mode="text" onPress={() => this.submit()}>
DONE
</Button>
</Appbar.Header>
Considering title accept a node, it can be used to display a react component.
How can I force center the title on all devices?

react-navigation allows passing a component for title instead of a string, so we can do the same thing here:
I wrote an example that accepts a custom title component and can be used wherever we want:
import * as React from 'react';
import { Appbar, Button, Text } from 'react-native-paper';
const ContentTitle = ({ title, style }) => (
<Appbar.Content
title={<Text style={style}> {title} </Text>}
style={{ alignItems: 'center' }}
/>
);
const App = () => (
<Appbar.Header>
<Appbar.Action icon="close" onPress={() => this.close()} />
<ContentTitle title={'Title'} style={{color:'white'}} />
<Button mode="text" onPress={() => this.submit()}>
DONE
</Button>
</Appbar.Header>
);
export default App;
You can check: https://snack.expo.io/r1VyfH1WL

There is 2 approach for this.
First,
The Appbar.Content has marginLeft applied to it. So, you just need to set the marginLeft to 0.
<Appbar.Header>
<Appbar.BackAction />
<Appbar.Content title='Title' style={{ marginLeft: 0 }} titleStyle={{ marginLeft: 0 }} />
// Put empty action here or any action you would like to have
<Appbar.Action/>
</Appbar.Header>
Sadly, this approach only allowed one menu action on the right. (or have an equal amount of actions both left and right, but I think only one menu action will be on the left side, that is back button)
Second, make the Appbar.Content has an absolute position. And yes, keep the marginLeft to 0.
<Appbar.Content title='Title'
style={{ marginLeft: 0, position: 'absolute', left: 0, right: 0, zIndex: -1 }}
titleStyle={{ alignSelf: 'center' }} />
We need to set the zIndex to -1 (or lower) so the button/menu action is clickable. This way, you can have more than one menu actions.
The first way is simple but limited, while the second way is powerful but more code to write.

You have to use titleStyle instead of style to center the text. The below code is working for me.
<Appbar.Header>
<Appbar.Content titleStyle={{textAlign: 'center'}} title="Centered Title" />
</Appbar.Header>
There is also a similar subtitleStyle for styling the subtitle. Check the docs for more info.

For 'react-native-paper', this snippet worked for me:
<Button
style = {{justifyContent: 'center'}}
>
Press
</Button>

This should align both text/node title:
<Appbar.Content
title={<Text>title</Text>}
style={{ alignItems: 'center' }}
/>
See https://snack.expo.io/rJUBIR6lU

<Appbar>
<Appbar.Content titleStyle={{alignSelf: 'center'}} title='something' />
</Appbar>

Child view border overrides parent's one on react-native

I have child View inside a Parent View component. I set Parent's border but child View's border override parent's one.
Here is the screen
Here is my code
<View style={{flexDirection: 'row',marginLeft: 20, marginRight: 20, height: height/20,
width: width-40, borderWidth: 2, borderRadius: 4, borderColor: '#D3D3D3'}}>
<View style={{backgroundColor: '#D3D3D3',flexDirection: 'row',
height: height/20, alignItems: 'center'}}>
<Thumbnail style={{marginLeft: 5,width: 20, height: 20}} square source={require('../assets/Turkey.png')}/>
<Picker mode="dropdown" selectedValue={this.state.selectedCountry}
onValueChange={(value)=>this.onCodeChanged(value)}
>
<Picker.Item label="+44" value="England"></Picker.Item>
<Picker.Item label="+90" value="Turkey"></Picker.Item>
</Picker>
</View>
<View style={{height: height/20, width: 250}}>
<Input placeholder="Phone" placeholderTextColor='#D3D3D3'/>
</View>
</View>
I tried to set borderBottomWidth props of child view to 0, but it did not work. Anyone know how can I fix this issue?

Is not the border. You are putting the height of everything (height/20) but you are not taking into account the border you just added, which counts towards the height.
Try something like (height/20 - 4)