React Native cropped border

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 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({

});

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 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>