React Native cropped border - react-native

Question

I am very new to React Native and I am trying to create a view as shown in the below image.
Is it possible to create a semi circular cropped border view as highlighted in red in the attached image?

Answer 1

I wrote the example code, output not exactly same but it would be helpful
Output of the code :
import React from 'react';
import {View, Text} from 'react-native';
import {height, width} from 'react-native-dimension';
import moment from 'moment';
const Test5 = () => {
return (
<View style={{flex: 1, backgroundColor: 'white'}}>
<View
style={{
alignSelf: 'center',
height: height(80),
width: width(90),
marginTop: width(20),
}}>
<View
style={{
flex: 1,
backgroundColor: 'grey',
}}>
<View
style={{
alignSelf: 'center',
height: height(27),
width: width(80),
borderRadius: width(4),
marginTop: width(20),
backgroundColor: 'white',
}}>
<View
style={{justifyContent: 'space-between', flexDirection:
'row'}}>
<View>
<Text style={{fontWeight: 'bold', padding: 10}}>CODE200</Text>
</View>
<View
style={{
alignSelf: 'flex-end',
marginTop: height(7),
padding: 10,
}}>
<Text style={{textAlign: 'right'}}>Valid Till</Text>
<Text style={{textAlign: 'right'}}>
{moment().format('dddd, MMMM Do YYYY')}
</Text>
</View>
</View>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
}}>
<View
style={{
height: height(4),
width: width(8),
borderRadius: width(10),
backgroundColor: 'grey',
}}
/>
<Text style={{color: 'grey'}}>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
</Text>
<View
style={{
height: height(4),
width: width(8),
borderRadius: width(10),
backgroundColor: 'grey',
}}
/>
</View>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
padding: 10,
}}>
<View>
<Text style={{textAlign: 'left'}}>APPLICABLE ON</Text>
<Text style={{textAlign: 'left'}}>Today</Text>
</View>
<View style={{alignSelf: 'flex-end'}}>
<Text style={{fontWeight: 'bold', textAlign: 'right'}}>Rs: 200/-</Text>
</View>
</View>
</View>
</View>
</View>
</View>
);
};
export default Test5;

Answer 2

I think this would require some css wizardery... Maybe you can can get the blank ticket as an asset and have it be the background Image for the view?
https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting
<ImageBackground
imageStyle={{ resizeMode: 'stretch'}}
style={{flex: 1,flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
alignContent: 'center',
height: textEntryHeight, }}
source={
highlightColor === 'magenta' || this.state.keyboardActive ?
textEntryHighlighted : textEntryNonHighlighted}
>
{textEntryHeight > 55 ?
<TextInput style={{
marginLeft: textEntryHeight > 55 ? 48 : 23,
color: 'white',
fontSize: bodyFontSize,
alignSelf: 'center',
width: '100%',
}}
returnKeyType='done'
onSubmitEditing={Keyboard.dismiss}
ref='textInput'
autoFocus={this.props.openKeyboard}
value={body}
onChangeText={(text) => updateHomeTextInputContents(text)}
underlineColorAndroid={'transparent'}
selectionColor={'white'}
keyboardAppearance={'dark'}
onFocus={() => this.setState({keyboardActive: true})}
onBlur={() => this.setState({keyboardActive: false})}
/> :
<Text style={{marginLeft: textEntryHeight > 55 ? 48 : 23,
color: 'white',
fontSize: bodyFontSize,
alignSelf: 'center'}}>
{body}
</Text>
}
<TouchableOpacity style={{position: 'absolute', right: 0}}
onPress={iconOnPress}>
<Image style={{height: 70, width: 70, right:0}} source=
{icon}/>
</TouchableOpacity>
</ImageBackground>

Answer 3

There is no out-of-the-box solution in React Native for this, but I think the simplest way to go is to create a component which you use as separator, only for this part:
For this you only need a parent View with a grey background, 2 semi circles, and a View with a white background which wraps a View with a dashed border style

Answer 4

I think you want something like this.--------------
Used this component for dash ---'react-native-dash'
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TouchableOpacity,
Dimensions,
Image,
FlatList,
AsyncStorage,
TextInput,
ActivityIndicator,
ScrollView,
ImageBackground
} from 'react-native';
import { ListItem, Left, Body, Right, Title } from "native-base";
import Dash from 'react-native-dash';
const window = Dimensions.get('window');
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
var localizedString;
type Props = {};
export default class App extends Component<Props> {
constructor(Props){
super(Props);
}
render() {
return (
<View style={{flex:1, alignItems:'center', justifyContent:'center', backgroundColor:'grey'}}>
<View style={{width:'80%', backgroundColor:'white', height:'100%', justifyContent:'space-between', flexDirection:'row', alignItems:'center', position:'absolute'}}>
</View>
<View style={{width:'95%', height:'100%', flexDirection:'row', alignItems:'center'}}>
<View style={{height:50, width:50, backgroundColor:'grey', borderRadius:150}}>
</View>
<Dash style={{width:'75%', height:5}}/>
<View style={{height:50, width:50, backgroundColor:'grey', borderRadius:150,}}>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
});