Docs Menu

Docs HomeDevelop ApplicationsAtlas Device SDK

Embedded Objects - React Native SDK

On this page

  • Create an Embedded Object
  • Example
  • Query a Collection on Embedded Object Properties
  • Example
  • Update an Embedded Object Property
  • Example
  • Overwrite an Embedded Object
  • Example
  • Delete an Embedded Object
  • Example

To create an embedded object, assign an instance of the embedded object to a parent object's property.

In the following CreateContact example, we create a new Contact object with an embedded Address object.

The CreateContact component does the following:

  • Creates React state variables that represent the contact's name and address details.

  • Gets access to an open realm instance by calling the useRealm() hook within the component.

  • Creates a component method submitContact() that performs a write transaction to create a new Address embedded object and Contact parent object based on the TextInput values for the contact's name and address.

  • Adds an onPress event on the "Submit Contact" button that calls submitContact().

1const CreateContact = () => {
2 const [name, setContactName] = useState('');
3 const [street, setStreet] = useState('');
4 const [city, setCity] = useState('');
5 const [country, setCountry] = useState('');
6 const [postalCode, setPostalCode] = useState('');
7 const realm = useRealm();
8
9 const submitContact = () => {
10 // Create a Contact within a write transaction
11 realm.write(() => {
12 // Create an embedded Address object
13 const address = {
14 street,
15 city,
16 country,
17 postalCode,
18 };
19
20 realm.create('Contact', {
21 _id: new Realm.BSON.ObjectID(),
22 name,
23 // Embed the address in the Contact object
24 address,
25 });
26 });
27 };
28 return (
29 <View>
30 <TextInput value={name} onChangeText={text => setContactName(text)} />
31 <TextInput value={street} onChangeText={text => setStreet(text)} />
32 <TextInput value={city} onChangeText={text => setCity(text)} />
33 <TextInput value={country} onChangeText={text => setCountry(text)} />
34 <TextInput
35 value={postalCode}
36 onChangeText={text => setPostalCode(text)}
37 />
38 <Button
39 title='Submit Contact'
40 onPress={submitContact}
41 />
42 </View>
43 );
44};

You can use dot notation to filter or sort a collection of objects based on an embedded object property value.

In the following ContactList example, we filter and query an embedded Address object.

The ContactList component does the following:

  • Performs a query for all contacts by passing the Contact class to the useQuery hook.

  • Filters for contacts with the name "John Smith" by passing collection.filtered() on the query "name == 'John Smith'".

  • Retrieves the contact's street address by using dot notation.

To update a property in an embedded object, modify the property in a write transaction.

In the following UpdateContact example, we update the street property for an embedded Address object.

The UpdateContact component does the following:

  • Creates a React state variable that represents the contact's new street address.

  • Performs a query for all contacts by passing the Contact class to the useQuery hook and filters for the contact that matches the name passed into the component as a prop.

  • Gets access to an opened realm instance by calling the useRealm() hook within the component.

  • Creates a component method updateStreet() that performs a write transaction and sets the contact's street address to the value of the street state variable.

  • Renders a TextInput that displays and changes the street state variable.

  • Adds an onPress event on the 'Update Street Address' button that calls updateStreet().

To overwrite an embedded object, reassign the embedded object property of a party to a new instance in a write transaction.

In the following OverwriteContact example, we overwrite an embedded Address object.

The OverwriteContact component does the following:

  • Creates React state variables that represent the contact's new address.

  • Performs a query for all contacts by passing the Contact class to the useQuery hook and filters for the contact that matches the name passed into the component as a prop.

  • Gets access to an opened realm instance by calling the useRealm() hook within the component.

  • Creates a component method updateAddress() that performs a write transaction and creates a new Address object that overwrites the existing address in the Contact object.

  • Renders TextInput components that display and change the state variables for the new address.

  • Adds an onPress event on the 'Overwrite Address' button that calls updateAddress().

Realm Uses Cascading Deletes for Embedded Objects. To delete an embedded object, delete the embedded object's parent.

In the following DeleteContact example, we delete an embedded object and its parent object.

The DeleteContact component does the following:

  • Performs a query for all contacts by passing the Contact class to the useQuery hook.

  • Filters for the Contact object that matches the name passed into the component as a prop.

  • Gets access to an open realm instance by calling the useRealm() hook within the component.

  • Creates a component method deleteContact() that performs a write transaction and calls Realm.delete() to remove the Contact object.

  • Add an onPress event on the "Delete Contact" button that calls deleteContact().

←  UUID - React Native SDKGeospatial - React Native SDK →