How to make below shown picture like style using TouchableNativeFeedback in React Native?

Question

I am attaching two images, one showing the current view and other showing the view that i want it to be.

You can see in the above images, in the first image, the highlighted area is a rectangle whereas in the second one, it is a rounded rectangle. I want to achieve second style , but i am not able to do.

The highlighted area is actually the result of TouchableNativeFeedback Component in React Native

Please guide me to achieve this

Code snippet is mentioned below :-

<View style={styles.chatDetailsScreenActionBar}>
   <View style={styles.chatDetailsScreenBackButtonView}>
       <TouchableNativeFeedback>
           <View style={styles.chatDetailsScreenBackButton}>
               <MaterialIcons name="arrow-back" size={30} color="white" />
               <Image source={{ uri: this.state.selectedChat.chat_thumbnail }} 
                          style={styles.chatDetailsScreenBackButtonImage} />
           </View>
       </TouchableNativeFeedback>
   </View>
</View>

Styles code for above Layout :-

chatDetailsScreenActionBar: {
        height: 70,
        backgroundColor: '#006156',
        justifyContent: 'center',
        paddingHorizontal: 10
    },
    chatDetailsScreenBackButtonView: {
        height: 55,
        width: 70,
        borderRadius: 24
    },
    chatDetailsScreenBackButton: {
        flexDirection: 'row',
        alignItems: 'center',
        height: "100%"
    },
    chatDetailsScreenBackButtonImage: {
        height: 36,
        width: 36,
        borderRadius: 18
    }

score 0 · Answer 1 · answered Jun 28 '20 at 10:31

0

Try to give the 'TouchableNativeFeedback' component style { borderRadius: 1000 }

answered Jun 28 '20 at 10:31

D10S

1,468
2
7
13

You need to give 'borderRadius' style to make corners rounded. Just figure out which component is the one doing that and give him that styling. If you'll post code it will be easier to help you out. – D10S Jun 28 '20 at 11:59
Hey, i added the code snippet, once check it please – Harsh Vardhan Gautam Jun 28 '20 at 12:23
add 'borderRadius: 100' to "chatDetailsScreenActionBar" styles – D10S Jun 28 '20 at 12:33
"chatDetailsScreenActionBar" is the whole rectangle , so it should no affect anything. But i tried this also, nothing changed – Harsh Vardhan Gautam Jun 28 '20 at 12:38
try to give them all – D10S Jun 28 '20 at 13:24

score 0 · Answer 2 · answered Jun 28 '20 at 22:20

0

try this : <TouchableNativeFeedback style={styles.TNF} > '...your code' </TouchableNativeFeedback>

TNF:{ width: ... , height: ... , backgroundColor:'#...' , borderRadius:50}

answered Jun 28 '20 at 22:20

adil stifi

65
3
8

yes, usually borderRadius is the choice for such cases, but in this case, it is not working. – Harsh Vardhan Gautam Jun 29 '20 at 06:59

How to make below shown picture like style using TouchableNativeFeedback in React Native?

2 Answers2